EE.09-04-22.06-SGCzerwiec 2022 · 54 kroki · ok. 98 min · 41 kryteriów z klucza

Rozwiązanie krok po kroku: Zamówienia materiałów do sieci komputerowych (Wersja podstawowa)

Aplikacja hurtowni dla firmy budującej sieci komputerowe: baza firma z trzema tabelami (materialy, producenci, jednostki), w której zapytania łączą tabele relacjami (JOIN), tworzą konto zaopatrzenie i nadają mu prawa (CREATE USER, GRANT). Do tego grafika sieci z przezroczystym tłem zapisana jako PNG, strona zamowienia.html z tabelą materiałów i przyciskami, style w styl4.css (z pseudoklasą :hover) i skrypt JavaScript, który koloruje braki w magazynie, aktualizuje ilość przez okno prompt i składa zamówienia w oknie alert.

To arkusz EE.09 z czerwca 2022 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw napisany najprościej, polami i metodami z tabeli 1 arkusza (getElementById, innerHTML, style.backgroundColor, atrybut onclick), a na końcu sprawdzony na prawdziwym wstrzyknięciu kodu przez okno prompt i zabezpieczony.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, nasłuchiwacze)” jest drugi sposób rozwiązania tego samego arkusza: siatka CSS, zmienne z kolorami, nagłówek tabeli w <thead>, przyciski obsłużone przez addEventListener bez identyfikatorów w każdej komórce i sprawdzanie wartości z okna przed wpisaniem - obie wersje są zgodne z kluczem.

Baza, grafika i plik z treścią tabeli pochodzą z oryginalnego archiwum CKE zad4.zip (załącznik do pobrania na stronie arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP; uprawnienia nowego konta sprawdzone logowaniem. Skrypt był uruchomiony w przeglądarce Chrome: kliknięcia, okno prompt i komunikaty alert sprawdzone testem.

Jak liczą się punkty. Klucz ma 41 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 31 punktów - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

Etap 1: Baza danych
Kroki 1-8 · po tym etapie masz 7 z 41 kryteriów (pkt)

Krok 1: Folder zdającego i archiwum zad4.zip
ok. 2 min
Polecenie z arkusza
Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego, którym został podpisany arkusz. Rozpakowane pliki należy umieścić w tym folderze. Po skończonej pracy wszystkie wyniki należy zapisać w tym folderze.
Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum zad4.zip rozpakowujesz do tego folderu, podając hasło Sieci^KomPuterowe_! (wielkość liter, daszek, podkreślenie i wykrzyknik mają znaczenie). W środku są trzy pliki: baza.sql (tabele do importu), obraz.jpg (grafika sieci) i tabela.txt (napisy do tabeli na stronie).
Do tego folderu trafia wszystko, co powstanie: zrzuty, kwerendy.txt, grafika, strona i arkusz stylów.
Typowe błędy
Pliki zapisane poza folderem zdającego nie trafią na płytę - a ocenia się tylko to, co jest na płycie.
Krok 2: XAMPP i baza firma z polskim porównywaniem
ok. 2 min
Polecenie z arkusza
Za pomocą narzędzia phpMyAdmin należy wykonać operacje na bazie danych: Utworzenie bazy danych o nazwie: firma z zestawem polskich znaków (np. utf8_unicode_ci)
W XAMPP Control Panel klikasz Start przy Apache i MySQL, potem w przeglądarce otwierasz http://localhost/phpmyadmin. Nowa w lewym panelu, nazwa firma, a w liście porównywania napisów utf8_unicode_ci (podpowiedź z arkusza; dobre są też utf8_polish_ci i utf8mb4_…), Utwórz. Porównywanie z rodziny utf8 sprawia, że „Skrętka” i „Moduł” zapiszą się w bazie bez krzaków.
Typowe błędy
Nazwa bazy musi brzmieć dokładnie firma - zapytanie 4 nadaje prawa do firma.*, a klucz R.1.1 sprawdza import właśnie do tej bazy.
Krok 3: Import tabel z pliku baza.sql i zrzut import.jpg
Kryteria:
R.1.1 Wykonano import tabel do bazy danych firma , czynność udokumentowano plikiem o nazwie import w formacie JPEG
ok. 3 min
Polecenie z arkusza
Import tabel do bazy firma z pliku baza.sql. Czynność należy udokumentować zrzutem ekranu, na którym powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel. Zrzut należy zapisać w formacie JPEG, pod nazwą import. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań.
Zaznacz bazę firma w lewym panelu, karta Import, Wybierz plik → baza.sql, Wykonaj. Plik tworzy trzy tabele z Obrazu 1 i wypełnia je danymi: jednostki (2 wiersze: metry, sztuki), materialy (7 materiałów) i producenci (4 firmy). Kolumny Producenci_id i Jednostki_id w tabeli materialy to klucze obce - numery wierszy z tabel producenci i jednostki. Na nich opierają się relacje Rel_01 i Rel_02 z obrazu.
Po imporcie zielony komunikat „Import zakończył się sukcesem” i trzy tabele w lewym panelu - to są „elementy wskazujące na poprawnie wykonany import”. Zrzut całego ekranu (Print Screen, wklejenie do edytora grafiki) zapisujesz jako import.jpg.
Typowe błędy
Ten zrzut ma być w JPEG (import.jpg), a zrzuty zapytań i grants - w PNG. Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Podgląd strony po tym kroku
Krok 4: Zapytanie 1: materiały powyżej 9 sztuk z producentem
Kryteria: ,
R.1.2 Zapisano plik tekstowy o nazwie kwerendy zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.3 Utworzono zapytanie 1 wybierające jedynie nazwę i ilość materiałów oraz odpowiadającą im nazwę producenta dla materiałów, których jest więcej niż 9. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa, ilosc, nazwaProd FROM materialy JOIN producenci ON Producenci_id = producenci.id WHERE ilosc > 9; (lub porównanie kluczy w WHERE) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są dokładnie 3 rekordy: Skrętka U/UTP drut 20 Netrack, Wtyk 8P8C 10 Netrack, Moduł Keystone 30 UGreen
ok. 4 min
Polecenie z arkusza
Zapytanie 1: wybierające jedynie nazwę i ilość materiałów oraz odpowiadającą im nazwę producenta dla materiałów, których jest więcej niż 9. Należy wykorzystać relację
Zaznacz bazę firma, karta SQL. Zapytanie klauzula po klauzuli:
SELECT nazwa, ilosc, nazwaProd - trzy kolumny z arkusza: dwie z tabeli materialy, jedna z producenci,
FROM materialy JOIN producenci - złączenie dwóch tabel, czyli „wykorzystanie relacji”,
ON materialy.Producenci_id = producenci.id - warunek złączenia: klucz obcy materiału równa się kluczowi głównemu producenta. Przed id stoi nazwa tabeli, bo kolumnę id mają obie tabele,
WHERE ilosc > 9 - „więcej niż 9” to większe niż, bez równości.
Wynik: 3 rekordy - Skrętka U/UTP drut 20 Netrack, Wtyk 8P8C 10 Netrack, Moduł Keystone 30 UGreen, dokładnie jak w kluczu. Zapytanie kopiujesz do pliku kwerendy.txt, a zrzut całego ekranu z wynikiem zapisujesz jako kw1.png.
Typowe błędy
ilosc >= 9 doda materiały z dokładnie 9 sztukami (w tej bazie takich nie ma, ale zapytanie ma działać dla każdego zestawu danych). Bez warunku ON baza połączy każdy materiał z każdym producentem - 28 wierszy zamiast 7.
kwerendy.txt Tekst nowy plik
-- Zapytanie 1 SELECT nazwa, ilosc, nazwaProd FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id WHERE ilosc > 9;
Podgląd strony po tym kroku
Krok 5: Zapytanie 2: materiał, producent i jednostka
Kryteria:
R.1.4 Utworzono zapytanie 2 wybierające jedynie nazwę materiału i odpowiadającą jej nazwę producenta oraz nazwę jednostki. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa, nazwaProd, nazwaJedn FROM materialy JOIN producenci ON Producenci_id = producenci.id JOIN jednostki ON Jednostki_id = jednostki.id; (lub porównanie kluczy w WHERE, dowolna kolejność łączenia tabel) oraz wynik działania zapytania udokumentowano zrzutem, na którym widocznych jest dokładnie 7 rekordów z nazwami produktów i odpowiadającymi im nazwami producentów i jednostek
ok. 3 min
Polecenie z arkusza
Zapytanie 2: wybierające jedynie nazwę materiału i odpowiadającą jej nazwę producenta oraz nazwę jednostki. Należy wykorzystać relację
Trzy tabele, więc dwa złączenia:
SELECT nazwa, nazwaProd, nazwaJedn - po jednej kolumnie z każdej tabeli,
FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id - relacja Rel_02,
JOIN jednostki ON materialy.Jednostki_id = jednostki.id - relacja Rel_01; kolejne JOIN dopisuje się po prostu za poprzednim.
Wynik: 7 rekordów - każdy materiał z bazy z nazwą producenta i jednostki, np. Zaciskarka - UGreen - sztuki. Zrzut: kw2.png. Bez ORDER BY kolejność wierszy wybiera serwer i bywa inna niż w tabeli materialy - klucz sprawdza liczbę i zawartość rekordów, nie kolejność.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT nazwa, ilosc, nazwaProd FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id WHERE ilosc > 9; -- Zapytanie 2 SELECT nazwa, nazwaProd, nazwaJedn FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id JOIN jednostki ON materialy.Jednostki_id = jednostki.id;
Podgląd strony po tym kroku
Krok 6: Zapytanie 3: użytkownik zaopatrzenie
Kryteria:
R.1.5 Utworzono zapytanie 3 tworzące użytkownika o nazwie zaopatrzenie na localhost z hasłem Z@op@trzenie. W pliku z kwerendami lub na zrzucie istnieje zapis np.: CREATE USER 'zaopatrzenie'@'localhost' IDENTIFIED BY 'Z@op@trzenie'; oraz wynik działania zapytania udokumentowano zrzutem z komunikatem o poprawnie wykonanej operacji, hasło widoczne jest jawnie (niezaszyfrowane)
ok. 2 min
Polecenie z arkusza
Zapytanie 3: tworzące użytkownika o nazwie zaopatrzenie na localhost z hasłem Z@op@trzenie
CREATE USER - nowe konto serwera bazy danych (nie użytkownik w tabeli),
'zaopatrzenie'@'localhost' - nazwa i komputer, z którego wolno się logować; obie części w apostrofach, połączone znakiem @,
IDENTIFIED BY 'Z@op@trzenie' - hasło zapisane jawnie; serwer sam zapisze je w postaci zaszyfrowanej.
phpMyAdmin odpowiada „MySQL zwrócił pusty wynik” - CREATE USER niczego nie wybiera, więc to znak sukcesu. Klucz wymaga, by na zrzucie kw3.png albo w pliku kwerendy.txt hasło było widoczne jawnie - zapytanie w karcie SQL to spełnia.
Typowe błędy
Utworzenie konta kreatorem Konta użytkowników zamiast zapytaniem nie zostawia zapytania do pliku ani na zrzucie. Hasło w dwóch apostrofach - w środku są znaki @, które bez apostrofów rozbiłyby zapytanie.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT nazwa, ilosc, nazwaProd FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id WHERE ilosc > 9; -- Zapytanie 2 SELECT nazwa, nazwaProd, nazwaJedn FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id JOIN jednostki ON materialy.Jednostki_id = jednostki.id; -- Zapytanie 3 CREATE USER 'zaopatrzenie'@'localhost' IDENTIFIED BY 'Z@op@trzenie';
Podgląd strony po tym kroku
Krok 7: Zapytanie 4: prawa do rekordów w bazie firma
Kryteria:
R.1.6 Utworzono zapytanie 4 nadające prawa umożliwiające przeglądanie, aktualizację, dodawanie i usuwanie rekordów dla utworzonego użytkownika na wszystkich tabelach bazy firma. W pliku z kwerendami lub na zrzucie istnieje zapis np.: GRANT SELECT, INSERT, UPDATE, DELETE ON firma.* TO 'zaopatrzenie'@'localhost'; oraz wynik działania zapytania udokumentowano zrzutem z komunikatem o poprawnie wykonanym zapytaniu
ok. 2 min
Polecenie z arkusza
Zapytanie 4: nadające prawa umożliwiające przeglądanie, aktualizację, dodawanie i usuwanie rekordów dla utworzonego użytkownika na wszystkich tabelach bazy firma
Każde słowo z arkusza ma swoje prawo: przeglądanie - SELECT, dodawanie - INSERT, aktualizacja - UPDATE, usuwanie - DELETE. Dalej:
ON firma.* - wszystkie tabele (*) bazy firma,
TO 'zaopatrzenie'@'localhost' - konto z zapytania 3, zapisane tak samo.
Komunikat „MySQL zwrócił pusty wynik”, zrzut kw4.png. Sprawdzone logowaniem na nowe konto: SELECT z tabeli materialy zwraca 7 wierszy, a DROP TABLE kończy się odmową dostępu - usuwanie rekordów to nie usuwanie tabel.
Typowe błędy
GRANT ALL PRIVILEGES daje też prawo do zmiany i usuwania tabel - arkusz wymienia tylko cztery operacje na rekordach. ON *.* nadaje prawa do wszystkich baz serwera.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT nazwa, ilosc, nazwaProd FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id WHERE ilosc > 9; -- Zapytanie 2 SELECT nazwa, nazwaProd, nazwaJedn FROM materialy JOIN producenci ON materialy.Producenci_id = producenci.id JOIN jednostki ON materialy.Jednostki_id = jednostki.id; -- Zapytanie 3 CREATE USER 'zaopatrzenie'@'localhost' IDENTIFIED BY 'Z@op@trzenie'; -- Zapytanie 4 GRANT SELECT, INSERT, UPDATE, DELETE ON firma.* TO 'zaopatrzenie'@'localhost';
Podgląd strony po tym kroku
Krok 8: SHOW GRANTS i zrzut grants.png
Kryteria:
R.1.7 Sprawdzono prawa użytkownika zaopatrzenie, co udokumentowano zrzutem ekranu o nazwie grants.png na którym widać prawa SELECT, UPDATE, INSERT i DELETE dla użytkownika zaopatrzenie dla firma.* (*.* też poprawnie, gdy aktywna jest baza firma)
ok. 2 min
Polecenie z arkusza
Po wykonaniu zapytań 3, 4 należy wydać polecenie SHOW GRANTS FOR 'zaopatrzenie'@'localhost'; Następnie należy wykonać zrzut ekranu z rezultatem polecenia i zapisać go pod nazwą grants.png. Zrzut powinien obejmować cały ekran monitora z widocznym paskiem zadań.
Polecenie wpisujesz w karcie SQL tak, jak stoi w arkuszu. Wynik to dwa wiersze:
GRANT USAGE ON *.* TOzaopatrzenie@localhostIDENTIFIED … - samo prawo do logowania (USAGE = brak praw do danych) i skrót hasła,
GRANT SELECT, INSERT, UPDATE, DELETE ONfirma.* TOzaopatrzenie@localhost`` - prawa z zapytania 4.
Zrzut całego ekranu: grants.png. Polecenia SHOW GRANTS nie dopisujesz do kwerendy.txt - arkusz wymienia tam tylko zapytania 1-4.
Typowe błędy
Zrzut z widokiem Konta użytkowników zamiast wyniku polecenia nie pokazuje praw dla firma.* w formie, której szuka egzaminator. Wynik bywa ucięty - rozwiń Pełne teksty (+ Opcje), aby lista praw była widoczna w całości.
Podgląd strony po tym kroku
Etap 2: Grafika i strona HTML
Kroki 9-28 · po tym etapie masz 19 z 41 kryteriów (pkt)

Krok 9: Grafika: tło przezroczyste
ok. 3 min
Polecenie z arkusza
Cechy grafiki z pliku obraz: Tło przezroczyste
obraz.jpg ma białe tło, a JPEG w ogóle nie zapisuje przezroczystości. W GIMP-ie: Warstwa → Przezroczystość → Dodaj kanał alfa, potem Kolory → Kolor na alfę z kolorem białym. Biel znika, a jasne krawędzie dostają częściową przezroczystość, więc kontur rysunku zostaje gładki. Szachownica w tle podglądu oznacza piksele przezroczyste.
Alternatywa: Zaznaczanie według koloru na białym tle i Usuń - szybsze, ale zostawia jasną obwódkę wokół monitorów.
Typowe błędy
Gumka albo zamalowanie tła kolorem bloku lewego (PaleGreen) to nie przezroczystość - klucz R.2.1 sprawdza zapis z zachowaniem przezroczystości.
Podgląd strony po tym kroku
Krok 10: Grafika: szerokość 300 px z zachowaniem proporcji
ok. 2 min
Polecenie z arkusza
Obraz przeskalowany z zachowaniem proporcji do szerokości 300 px
Oryginał ma 510 × 640 px. Obraz → Skaluj obraz, łańcuch między szerokością a wysokością zamknięty (to jest „zachowanie proporcji”), szerokość 300 px - wysokość przelicza się sama: 640 × 300 / 510 = 376,5, czyli 376 px (klucz: 376 px ±2).
Typowe błędy
Wpisanie samej szerokości przy rozpiętym łańcuchu daje obraz 300 × 640 - ściśnięta grafika i brak punktu.
Krok 11: Grafika: zapis jako obraz.png
Kryteria:
R.2.1 Grafikę w pliku obraz przeskalowano z zachowaniem proporcji do szerokości 300 px, odpowiadająca temu wysokość 376 px (± 2 px), obraz zapisano z zachowaniem przezroczystości
ok. 1 min
Polecenie z arkusza
Grafika zapisana pod nazwą obraz w formacie obsługującym przezroczystość
Format z przezroczystością to PNG (albo GIF, ale ten ma tylko 256 kolorów). W GIMP-ie Plik → Wyeksportuj jako…, nazwa obraz.png, Eksportuj (zwykłe Zapisz daje format .xcf). Nazwa bez zmian, inne jest tylko rozszerzenie - stąd w arkuszu „pod nazwą obraz”. Plik obraz.jpg z archiwum może zostać w folderze.
Typowe błędy
Eksport do JPEG zamienia przezroczyste piksele z powrotem na kolor (zwykle biały albo czarny) - przezroczystość przepada.
Podgląd strony po tym kroku
Krok 12: Plik zamowienia.html
Kryteria:
R.2.2 Witrynę internetową zapisano w pliku o nazwie zamowienia.html
ok. 1 min
Polecenie z arkusza
Cechy witryny: Składa się ze strony o nazwie zamowienia.html
W edytorze tworzysz w folderze zdającego plik zamowienia.html - bez polskiej litery w nazwie i z rozszerzeniem .html (strona nie ma PHP, sam HTML i JavaScript). Nazwę sprawdza klucz (R.2.2). Plik jest na razie pusty.
zamowienia.html HTML nowy plik
Podgląd strony po tym kroku (zamowienia.html)
Krok 13: Szkielet HTML5
ok. 1 min
Polecenie z arkusza
Zapisana w języku HTML5
Pierwsza linia <!DOCTYPE html> to deklaracja HTML5 - przeglądarka wyświetla wtedy stronę według aktualnego standardu. Pod nią szkielet: <html>, w nim <head> (informacje o stronie) i <body> (to, co widać).
zamowienia.html HTML zmienione: 7 linii
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 14: Kodowanie polskich znaków
ok. 1 min
Polecenie z arkusza
Jawnie zastosowany właściwy standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwsza rzecz w <head> - „jawnie”, czyli zapisane w kodzie strony. Plik trzeba też zapisać w UTF-8 (w Notepad++ menu Kodowanie), inaczej „ilość” i „Zamów” wyświetlą się jako krzaki.
zamowienia.html HTML zmienione: 1 linia
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 15: Język strony
Kryteria:
R.2.3 Zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> oraz zadeklarowano dla witryny język polski (np. lang = 'pl')
ok. 1 min
Polecenie z arkusza
Zadeklarowany język zawartości witryny: polski
Atrybut lang="pl" w znaczniku <html> - przeglądarka i czytnik ekranu wiedzą, że treść jest po polsku. Deklaracja HTML5, kodowanie i język razem dają R.2.3.
zamowienia.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> </head> <body> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 16: Tytuł strony
Kryteria:
R.2.4 Nadano tytuł strony: Zamówienia hurtowe
ok. 1 min
Polecenie z arkusza
Tytuł strony widoczny na karcie przeglądarki: „Zamówienia hurtowe”
<title> w <head> - napis na karcie przeglądarki. Nie myl go z nagłówkiem banera („Sieci komputerowe”).
zamowienia.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zamówienia hurtowe</title> </head> <body> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 17: Podpięcie arkusza stylów styl4.css
Kryteria:
R.3.5 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl4.css , formatowanie pochodzi jedynie z tego arkusza lub skryptu Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)
ok. 1 min
Polecenie z arkusza
Arkusz stylów w pliku o nazwie styl4.css prawidłowo połączony z kodem strony
<link rel="stylesheet" href="styl4.css"> w <head>. Nazwa ma w sobie cyfrę: styl4.css. Plik stylów powstanie po HTML-u; całe formatowanie strony będzie w nim (R.3.5).
Typowe błędy
Klucz uznaje R.3.5 tylko przy działającym połączeniu, w którym każdy selektor trafia w swój blok - kropka zamiast # przy identyfikatorze odbiera punkt.
zamowienia.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zamówienia hurtowe</title> <link rel="stylesheet" href="styl4.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 18: Bloki: baner, lewy, prawy i stopka
Kryteria:
R.2.5 Wygląd strony zdefiniowano dzieląc ją na bloki: banera, lewy, prawy i stopkę. Zastosowano znaczniki sekcji
ok. 2 min
Polecenie z arkusza
Podział strony na: blok banera, obok siebie bloki lewy i prawy, blok stopki. Podział zrealizowany za pomocą znaczników sekcji
Cztery bloki w kolejności z obrazu 2: baner <header>, blok lewy i prawy jako <section>, stopka <footer>. Sekcje różnią się wymiarami i kolorem, więc dostają identyfikatory left i right (nazwy po angielsku - arkusz ich nie narzuca). Obok siebie ustawi je dopiero CSS.
zamowienia.html HTML zmienione: 8 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zamówienia hurtowe</title> <link rel="stylesheet" href="styl4.css"> </head> <body> <header> </header> <section id="left"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 19: Baner: nagłówek pierwszego stopnia
ok. 1 min
Polecenie z arkusza
Zawartość banera: nagłówek pierwszego stopnia o treści „Sieci komputerowe”
<h1> w <header> - jedyny nagłówek pierwszego stopnia na stronie.
zamowienia.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zamówienia hurtowe</title> <link rel="stylesheet" href="styl4.css"> </head> <body> <header> <h1>Sieci komputerowe</h1> </header> <section id="left"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 20: Blok lewy: nagłówek drugiego stopnia
ok. 1 min
Polecenie z arkusza
Zawartość bloku lewego: Nagłówek drugiego stopnia o treści: „Aktualizacja i zamówienia materiałów”
Drugiego stopnia to <h2>. Na obrazie 2 napis łamie się na dwie linie - to tylko skutek wąskiego bloku, w kodzie zostaje jedna linia.
zamowienia.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zamówienia hurtowe</title> <link rel="stylesheet" href="styl4.css"> </head> <body> <header> <h1>Sieci komputerowe</h1> </header> <section id="left"> <h2>Aktualizacja i zamówienia materiałów</h2> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)

Krok 21: Blok lewy: paragraf

ok. 1 min

Polecenie z arkusza

Paragraf (akapit) o treści: „Do wewnętrznego użytku firmy”

Paragraf to <p>. Mniejszy krój na obrazie 2 to domyślny wygląd przeglądarki, arkusz go nie wymaga.

zamowienia.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 22: Blok lewy: grafika z tekstem alternatywnym
Kryteria:
R.2.7 W bloku lewym umieszczono obraz o nazwie obraz z tekstem alternatywnym „sieć komputerowa"
ok. 1 min
Polecenie z arkusza
Grafika o nazwie obraz z tekstem alternatywnym „sieć komputerowa”
<img> z atrybutami src="obraz.png" - przygotowana grafika z przezroczystym tłem - i alt z tekstem, który czytnik ekranu przeczyta zamiast obrazu. Tło bloku będzie prześwitywać przez przezroczyste piksele. Znacznik <img> w HTML5 nie ma znacznika zamykającego ani ukośnika na końcu.
zamowienia.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zamówienia hurtowe</title> <link rel="stylesheet" href="styl4.css"> </head> <body> <header> <h1>Sieci komputerowe</h1> </header> <section id="left"> <h2>Aktualizacja i zamówienia materiałów</h2> <p>Do wewnętrznego użytku firmy</p> <img src="obraz.png" alt="sieć komputerowa"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)
Krok 23: Blok prawy: tabela i wiersz nagłówkowy
Kryteria:
R.2.9 Pierwszy wiersz tabeli jest wierszem nagłówkowym o zawartości: „Produkt”, „Jednostka”, „Dostępna ilość”, „Aktualizacja”, „Zamówienie”. Zastosowano znaczniki <th>
ok. 2 min
Polecenie z arkusza
Zawartość bloku prawego: tabela o 5 wierszach i 5 kolumnach, z czego pierwszy wiersz zawiera komórki nagłówkowe. Zawartość jest zgodna z obrazem 2. Zawartość komórek nagłówkowych: „Produkt”, „Jednostka”, „Dostępna ilość”, „Aktualizacja”, „Zamówienie”
<table> to tabela, <tr> - jej wiersz, a komórki nagłówkowe to <th> (table header): przeglądarka pogrubia je i wyśrodkowuje. Pierwszy wiersz ma pięć takich komórek, czyli wyznacza pięć kolumn (R.2.9). Pozostałe cztery wiersze dojdą w następnym kroku.
zamowienia.html HTML zmienione: 9 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zamówienia hurtowe</title> <link rel="stylesheet" href="styl4.css"> </head> <body> <header> <h1>Sieci komputerowe</h1> </header> <section id="left"> <h2>Aktualizacja i zamówienia materiałów</h2> <p>Do wewnętrznego użytku firmy</p> <img src="obraz.png" alt="sieć komputerowa"> </section> <section id="right"> <table> <tr> <th>Produkt</th> <th>Jednostka</th> <th>Dostępna ilość</th> <th>Aktualizacja</th> <th>Zamówienie</th> </tr> </table> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (zamowienia.html)

Krok 24: Wiersze 2-5: napisy z pliku tabela.txt

Kryteria:

R.2.8 W bloku prawym umieszczono tabelę o pięciu wierszach i pięciu kolumnach, zastosowano znaczniki <table>, <tr>, <td>

ok. 4 min

Polecenie z arkusza

Zawartość komórek wierszy 2 ÷ 5: w trzech pierwszych kolumnach znajdują się napisy widoczne na obrazie 2, napisy należy skopiować z pliku tabela.txt wypakowanego z archiwum

Plik tabela.txt ma cztery linie, w każdej trzy napisy rozdzielone średnikiem: Skrętka U/UTP drut;metr;20. Każda linia to jeden wiersz <tr>, a każdy napis - komórka <td>. Czwarta i piąta komórka zostają na razie puste - trafią do nich przyciski. Tabela ma teraz 5 wierszy i 5 kolumn (R.2.8).

Plik jest zapisany w kodowaniu Windows-1250, nie w UTF-8. Notatnik Windows odczyta go poprawnie, ale edytor ustawiony na UTF-8 pokaże „Skr�tka”. Gdy po skopiowaniu w napisach są krzaki, zmień kodowanie w edytorze (w Notepad++ Kodowanie → Zestaw znaków → Środkowoeuropejski → Windows-1250) i skopiuj jeszcze raz.

Typowe błędy

Napisy przepisane ręcznie zamiast skopiowane z pliku - łatwo o literówkę („Skretka”, „8P8B”). Wartości w kolumnie „Dostępna ilość” skrypt będzie czytał jako liczby, więc nie dopisuj do nich jednostek ani spacji.

zamowienia.html HTML zmienione: 28 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td>20</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td>2</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td>10</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td>30</td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 25: Czwarta kolumna: przyciski „Aktualizuj”

ok. 2 min

Polecenie z arkusza

w czwartej kolumnie znajdują się przyciski o treści „Aktualizuj”, wciśnięcie dowolnego przycisku powoduje wywołanie funkcji aktualizującej

W każdej z czterech czwartych komórek <button>Aktualizuj</button> - napis na przycisku to treść między znacznikami. Wywołanie funkcji aktualizującej dojdzie w etapie JavaScript: przycisk dostanie wtedy atrybut onclick, a funkcja numer swojego wiersza.

zamowienia.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td>20</td>
                <td><button>Aktualizuj</button></td>
                <td></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td>2</td>
                <td><button>Aktualizuj</button></td>
                <td></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td>10</td>
                <td><button>Aktualizuj</button></td>
                <td></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td>30</td>
                <td><button>Aktualizuj</button></td>
                <td></td>
            </tr>
        </table>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 26: Piąta kolumna: przyciski „Zamów”

Kryteria:

R.2.10 W czwartej kolumnie umieszczono przyciski o treści "Aktualizuj" oraz w piątej kolumnie przyciski o treści "Zamów". Przycisków jest tyle, ile wierszy tabeli (nie licząc wiersza nagłówkowego)

ok. 1 min

Polecenie z arkusza

w piątej kolumnie znajdują się przyciski o treści „Zamów”, wciśnięcie dowolnego przycisku powoduje wywołanie funkcji zamawiającej

Tak samo w piątej kolumnie: <button>Zamów</button> w każdym wierszu. Przycisków każdego rodzaju jest tyle, ile wierszy z danymi - cztery (R.2.10). Funkcja zamawiająca też dojdzie w etapie JavaScript.

Typowe błędy

<input type="submit"> poza formularzem nie ma czego wysłać, ale przyciski poza tabelą albo w złej kolumnie to brak punktu R.2.10.

zamowienia.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td>20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td>2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td>10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td>30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 27: Stopka: odnośnik otwierany w nowej karcie

Kryteria:

R.3.2 Na stronie umieszczono odnośnik, którego kliknięcie inicjuje otwarcie strony http://sieci.pl/ w nowej karcie przeglądarki

ok. 1 min

Polecenie z arkusza

Zawartość bloku stopki: Odnośnik do strony http://sieci.pl/ otwierany w nowej karcie przeglądarki i podpisany „Nasza strona internetowa”

<a href="http://sieci.pl/"> z adresem dokładnie jak w arkuszu, a target="_blank" otwiera stronę w nowej karcie (R.3.2). Podpis odnośnika to tekst między znacznikami.

Typowe błędy

href="sieci.pl" bez http:// przeglądarka potraktuje jako plik w folderze strony i pokaże błąd.

zamowienia.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td>20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td>2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td>10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td>30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 28: Stopka: paragraf z autorem strony

Kryteria:

R.2.6 W bloku banera zapisano nagłówek h1: "Sieci komputerowe", w bloku lewym h2: "Aktualizacja i zamówienia materiałów" oraz paragraf: "Do wewnętrznego użytku firmy", w stopce paragraf z numerem zdającego

ok. 1 min

Polecenie z arkusza

Paragraf o treści „Stronę przygotował: ”, dalej wstawiony numer zdającego

Na egzaminie po dwukropku wpisujesz swój numer PESEL. W tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora: Bartosz Bryniarski. Napis stoi w <p>, więc trafi do nowej linii pod odnośnikiem. Strona ma już nagłówki <h1>, <h2>, paragraf w bloku lewym i paragraf w stopce (R.2.6).

zamowienia.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td>20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td>2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td>10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td>30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Etap 3: Styl CSS
Kroki 29-39 · po tym etapie masz 30 z 41 kryteriów (pkt)
Krok 29: Plik styl4.css: Verdana i wyśrodkowanie dla wszystkich
Kryteria:
R.4.1 Ustawiono formatowanie domyślne dla wszystkich selektorów CSS (*): krój czcionki Verdana, (czcionka Verdana jako pierwsza) wyrównanie tekstu do środka
ok. 1 min
Polecenie z arkusza
Styl CSS zdefiniowany w całości w zewnętrznym pliku o nazwie styl4.css. Formatowanie domyślne dla wszystkich selektorów CSS: krój czcionki Verdana, wyrównanie tekstu do środka
Nowy plik styl4.css w folderze zdającego - od teraz każda reguła trafia tylko tutaj, bez atrybutów style w HTML-u. „Dla wszystkich selektorów” to selektor uniwersalny *: obejmuje każdy element, także przyciski, które kroju po body nie dziedziczą (R.4.1). text-align: center wyśrodkowuje napisy w blokach i komórkach tabeli.
styl4.css CSS nowy plik
* { font-family: Verdana; text-align: center; }
Podgląd strony po tym kroku (zamowienia.html)
Krok 30: Baner: tło DarkGreen, biały tekst, marginesy wewnętrzne
ok. 1 min
Polecenie z arkusza
Dla bloku banera: kolor tła DarkGreen, biały kolor czcionki, marginesy wewnętrzne 5 px
Selektor znacznika header. DarkGreen i white to nazwy kolorów CSS - przeglądarka zna je bez zamiany na kod szesnastkowy. Marginesy wewnętrzne to padding - odsuwają napis od krawędzi bloku.
styl4.css CSS zmienione: 5 linii
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; }
Podgląd strony po tym kroku (zamowienia.html)
Krok 31: Blok lewy: tło PaleGreen i wymiary
ok. 1 min
Polecenie z arkusza
Dla bloku lewego: kolor tła PaleGreen, szerokość 30%, wysokość 500 px
Selektor identyfikatora #left - z krzyżykiem, bo w HTML-u jest id="left". Szerokość w procentach liczy się od szerokości okna, wysokość jest stała.
styl4.css CSS zmienione: 5 linii
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; } #left { background-color: PaleGreen; width: 30%; height: 500px; }
Podgląd strony po tym kroku (zamowienia.html)
Krok 32: Blok prawy: tło Honeydew, wymiary i margines górny
Kryteria:
R.4.4 Ustawiono szerokość 30% dla bloku lewego i 70% dla prawego (width lub grid- template-columns lub flex)
ok. 2 min
Polecenie z arkusza
Dla bloku prawego: kolor tła Honeydew, szerokość 70%, wysokość 500 px, margines wewnętrzny górny 100 px
Margines wewnętrzny górny to padding-top - przesuwa tabelę 100 px w dół, jak na obrazie 2. Szerokości obu bloków (30% i 70%) są ustawione (R.4.4).
padding dolicza się do wysokości: blok prawy ma na ekranie 500 + 100 = 600 px, a lewy 500 px. Klucz R.3.1 przewiduje to wprost - blok lewy krótszy o 100 px i przerwa między nim a stopką są poprawnym układem.
Typowe błędy
margin-top zamiast padding-top odsunie cały blok od banera i zostawi pasek tła strony - to margines zewnętrzny, a arkusz mówi o wewnętrznym.
styl4.css CSS zmienione: 6 linii
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; } #left { background-color: PaleGreen; width: 30%; height: 500px; } #right { background-color: Honeydew; width: 70%; height: 500px; padding-top: 100px; }
Podgląd strony po tym kroku (zamowienia.html)

Krok 33: Stopka: tło PaleGreen i marginesy wewnętrzne

ok. 1 min

Polecenie z arkusza

Dla stopki: kolor tła PaleGreen, marginesy wewnętrzne 3 px

Ten sam kolor co blok lewy, padding: 3px ze wszystkich stron.

styl4.css CSS zmienione: 4 linie

* {
    font-family: Verdana;
    text-align: center;
}
header {
    background-color: DarkGreen;
    color: white;
    padding: 5px;
}
#left {
    background-color: PaleGreen;
    width: 30%;
    height: 500px;
}
#right {
    background-color: Honeydew;
    width: 70%;
    height: 500px;
    padding-top: 100px;
}
footer {
    background-color: PaleGreen;
    padding: 3px;
}

Podgląd strony po tym kroku (zamowienia.html)

Krok 34: Układ bloków zgodny z obrazem 2
Kryteria:
R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym lub blok lewy jest krótszy o 100 px od prawego i jest widoczna przerwa między blokiem lewym a stopką (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float albo display flex albo grid); clear:both w stopce nie jest wymagane
ok. 2 min
Polecenie z arkusza
Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2
Obie sekcje dostają float: left: blok lewy (30%) staje przy lewej krawędzi, prawy (70%) obok niego - razem dokładnie 100% szerokości. Stopka z clear: both zaczyna się pod wyższym z bloków, czyli pod prawym (600 px) - pod lewym zostaje 100 px przerwy, którą klucz przyjmuje (R.3.1). Klucz dopuszcza też stopkę bez clear, ale wtedy wsuwa się ona pod pływające bloki i jej tło znika za nimi.
Wysokość bloku lewego jest stała, a jego zawartość nie: w oknie szerokim na 1920 px nagłówek mieści się w jednej linii i grafika kończy się 20 px nad dolną krawędzią tła. Przy 1280 px nagłówek łamie się na dwie linie i dół grafiki wystaje ok. 10 px poza tło bloku - w przerwę przed stopką, którą klucz dopuszcza.
Typowe błędy
Bloki o sumie szerokości 100% nie mogą mieć marginesów zewnętrznych ani obramowań, a padding tylko pionowy - każdy piksel w poziomie zepchnie blok prawy pod lewy.
styl4.css CSS zmienione: 6 linii
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; } #left { background-color: PaleGreen; width: 30%; height: 500px; } #right { background-color: Honeydew; width: 70%; height: 500px; padding-top: 100px; } footer { background-color: PaleGreen; padding: 3px; } section { float: left; } footer { clear: both; }
Podgląd strony po tym kroku (zamowienia.html)
Krok 35: Tabela i komórki: obramowanie DarkGreen, połączone
Kryteria: ,
R.4.8 Ustawiono obramowanie połączone (border-collapse: collapse; lub border-spacing: 0) dla tabeli
R.4.9 Ustawiono obramowanie o szerokości 1px linią ciągłą w kolorze DarkGreen dla tabeli i komórek tabeli
ok. 2 min
Polecenie z arkusza
Wspólne dla selektorów tabeli i komórek tabeli (bez komórek nagłówkowych): obramowanie o szerokości 1 px linią ciągłą w kolorze DarkGreen, obramowanie połączone
table, td - dwa selektory znaczników rozdzielone przecinkiem dostają jedną regułę; komórek nagłówkowych th w niej nie ma, więc wiersz nagłówkowy ma tylko obramowanie zewnętrzne tabeli, jak na obrazie 2 (R.4.9),
border: 1px solid DarkGreen - szerokość, linia ciągła, kolor,
border-collapse: collapse na tabeli - „obramowanie połączone”: sąsiednie komórki mają jedną wspólną linię zamiast dwóch z odstępem (R.4.8).
Typowe błędy
Klasa (np. .tabela) zamiast selektora znacznika - według uwagi w kluczu style tabeli liczą się tylko przy selektorach table, td, th.
styl4.css CSS zmienione: 6 linii
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; } #left { background-color: PaleGreen; width: 30%; height: 500px; } #right { background-color: Honeydew; width: 70%; height: 500px; padding-top: 100px; } footer { background-color: PaleGreen; padding: 3px; } section { float: left; } footer { clear: both; } table, td { border: 1px solid DarkGreen; } table { border-collapse: collapse; }
Podgląd strony po tym kroku (zamowienia.html)
Krok 36: Tabela: marginesy automatyczne i szerokość 95%
Kryteria: ,
R.4.5 Ustawiono szerokość 95% dla selektora table
R.4.6 Ustawiono marginesy zewnętrzne (margin) auto dla tabeli
ok. 1 min
Polecenie z arkusza
Dodatkowo dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 95%
Do reguły table dochodzą margin: auto - przeglądarka dzieli wolne miejsce po równo na lewo i prawo, więc tabela stoi na środku bloku (R.4.6) - i width: 95% szerokości bloku prawego (R.4.5).
styl4.css CSS zmienione: 2 linie
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; } #left { background-color: PaleGreen; width: 30%; height: 500px; } #right { background-color: Honeydew; width: 70%; height: 500px; padding-top: 100px; } footer { background-color: PaleGreen; padding: 3px; } section { float: left; } footer { clear: both; } table, td { border: 1px solid DarkGreen; } table { border-collapse: collapse; margin: auto; width: 95%; }
Podgląd strony po tym kroku (zamowienia.html)

Krok 37: Komórki: marginesy wewnętrzne 20 px i 0

ok. 1 min

Polecenie z arkusza

Wspólne dla selektorów komórki tabeli i komórki nagłówkowej: marginesy wewnętrzne górny i dolny 20 px, prawy i lewy 0

Skrót padding: 20px 0 - pierwsza wartość dotyczy góry i dołu, druga lewej i prawej strony. Wiersze tabeli robią się wysokie jak na obrazie 2.

styl4.css CSS zmienione: 3 linie

* {
    font-family: Verdana;
    text-align: center;
}
header {
    background-color: DarkGreen;
    color: white;
    padding: 5px;
}
#left {
    background-color: PaleGreen;
    width: 30%;
    height: 500px;
}
#right {
    background-color: Honeydew;
    width: 70%;
    height: 500px;
    padding-top: 100px;
}
footer {
    background-color: PaleGreen;
    padding: 3px;
}
section {
    float: left;
}
footer {
    clear: both;
}
table, td {
    border: 1px solid DarkGreen;
}
table {
    border-collapse: collapse;
    margin: auto;
    width: 95%;
}
td, th {
    padding: 20px 0;
}

Podgląd strony po tym kroku (zamowienia.html)

Krok 38: Przycisk: tło DarkGreen, biały tekst, marginesy wewnętrzne
Kryteria: , ,
R.4.2 Ustawiono kolor tła DarkGreen dla banera i przycisku, PaleGreen dla bloku lewego i stopki, Honeydew dla bloku prawego
R.4.3 Ustawiono biały kolor czcionki dla banera i przycisku
R.4.7 Ustawiono marginesy wewnętrzne (padding): 5px dla banera i przycisku, 3px dla stopki, górny i dolny 20px oraz prawy i lewy 0 dla selektorów td i th
ok. 1 min
Polecenie z arkusza
Dla przycisku: kolor tła DarkGreen, biały kolor czcionki, marginesy wewnętrzne 5 px
Selektor znacznika button obejmuje wszystkie osiem przycisków. Komplet kolorów tła (R.4.2), białej czcionki banera i przycisku (R.4.3) oraz marginesów wewnętrznych (R.4.7) jest ustawiony.
styl4.css CSS zmienione: 5 linii
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; } #left { background-color: PaleGreen; width: 30%; height: 500px; } #right { background-color: Honeydew; width: 70%; height: 500px; padding-top: 100px; } footer { background-color: PaleGreen; padding: 3px; } section { float: left; } footer { clear: both; } table, td { border: 1px solid DarkGreen; } table { border-collapse: collapse; margin: auto; width: 95%; } td, th { padding: 20px 0; } button { background-color: DarkGreen; color: white; padding: 5px; }
Podgląd strony po tym kroku (zamowienia.html)
Krok 39: Przycisk pod kursorem myszy
Kryteria:
R.4.10 W momencie, gdy kursor myszy znajdzie się na przycisku jego kolor tła zmienia się na Honeydew, a kolor czcionki na DarkGreen (np. za pomocą pseudoklasy hover)
ok. 1 min
Polecenie z arkusza
W momencie, gdy kursor myszy znajdzie się na przycisku jego kolor tła zmienia się na Honeydew, a kolor czcionki na DarkGreen
Pseudoklasa :hover działa tylko wtedy, gdy kursor jest nad elementem - po zjechaniu kursora wraca wygląd z reguły button. Kolory są zamienione miejscami: jasne tło, ciemny napis (R.4.10). W podglądzie najedź kursorem na dowolny przycisk.
Typowe błędy
Spacja w button :hover zmienia znaczenie selektora (element pod kursorem WEWNĄTRZ przycisku) - reguła przestaje działać.
styl4.css CSS zmienione: 4 linie
* { font-family: Verdana; text-align: center; } header { background-color: DarkGreen; color: white; padding: 5px; } #left { background-color: PaleGreen; width: 30%; height: 500px; } #right { background-color: Honeydew; width: 70%; height: 500px; padding-top: 100px; } footer { background-color: PaleGreen; padding: 3px; } section { float: left; } footer { clear: both; } table, td { border: 1px solid DarkGreen; } table { border-collapse: collapse; margin: auto; width: 95%; } td, th { padding: 20px 0; } button { background-color: DarkGreen; color: white; padding: 5px; } button:hover { background-color: Honeydew; color: DarkGreen; }
Podgląd strony po tym kroku (zamowienia.html)

Etap 4: JavaScript

Kroki 40-50 · po tym etapie masz 41 z 41 kryteriów (pkt)

Krok 40: Funkcja zaznaczająca braki: odczyt ilości z każdego wiersza

Kryteria:

R.5.1 Skrypt zapisano językiem JavaScript i zawarto w nim przynajmniej jedną poprawną składniowo instrukcję języka

ok. 4 min

Polecenie z arkusza

Funkcja zaznaczająca braki – obraz 3: Sprawdza wartości w kolumnie „Dostępna Ilość” dla każdego wiersza tabeli

Skrypt w znaczniku <script> na końcu <body> - przeglądarka czyta go, gdy tabela już istnieje. Żeby skrypt znalazł komórki z ilością, każda dostaje identyfikator: quantity1 - quantity4 (numer wiersza).

function markShortages() - funkcja zaznaczająca braki,
for (let i = 1; i <= 4; i++) - pętla po czterech wierszach z danymi,
document.getElementById("quantity" + i) - identyfikator sklejony z napisu i numeru wiersza, metoda z tabeli 1 arkusza,
Number(cell.innerHTML) - zawartość komórki to napis (np. "20"), a porównania wymagają liczby.

Funkcja na razie tylko czyta wartości i nikt jej nie wywołuje - wygląd strony się nie zmienia. Skrypt jest zapisany w JavaScript i ma poprawne instrukcje (R.5.1).

zamowienia.html HTML zmienione: 12 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 41: Ilość 0: tło czerwone

Kryteria:

R.5.3 Do sprawdzenia braków zastosowano instrukcję warunkową sprawdzającą, czy wartość jest równa 0 lub jest z przedziału <1, 5>

ok. 2 min

Polecenie z arkusza

Jeżeli wartość jest równa 0, tło tej komórki zmienione jest na czerwone

Instrukcja warunkowa if z porównaniem == (dwa znaki równości - jeden to przypisanie). Kolor tła zmienia właściwość style.backgroundColor z tabeli 1 - w JavaScript bez myślnika, a druga część nazwy wielką literą (R.5.3).

zamowienia.html HTML zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 42: Ilość od 1 do 5: tło żółte

ok. 2 min

Polecenie z arkusza

Jeżeli wartość jest z przedziału <1, 5>, tło tej komórki zmienione jest na żółte

Nawiasy ostre w zapisie <1, 5> oznaczają przedział domknięty - liczby 1 i 5 też do niego należą. Dlatego >= i <=, połączone operatorem && („i”): oba warunki muszą być spełnione naraz. Gałąź else if sprawdza się tylko wtedy, gdy wartość nie była zerem.

Typowe błędy

value > 1 && value < 5 pomija 1 i 5 - egzaminator sprawdza w przeglądarce wszystkie stany (R.5.4), także wartości graniczne.

zamowienia.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 43: Pozostałe ilości: tło Honeydew

ok. 1 min

Polecenie z arkusza

W każdym innym przypadku tło komórki jest koloru Honeydew

Ostatnia gałąź else - wszystko, co nie jest zerem ani liczbą od 1 do 5. Bez niej komórka, która raz zrobiła się czerwona, zostałaby czerwona po wpisaniu np. 30 - funkcja ma ustawić kolor w każdym przypadku.

zamowienia.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 44: Start skryptu: zaznaczenie braków i numer zamówienia

ok. 2 min

Polecenie z arkusza

Na początku działania skryptu jest wywoływana funkcja zaznaczająca braki oraz zainicjowana jest wartością 0 zmienna przechowująca id zamówienia

Dwie pierwsze linie skryptu wykonują się od razu po wczytaniu strony:

let orderId = 0; - zmienna z numerem ostatniego zamówienia; funkcja zamawiająca będzie ją zwiększać,
markShortages(); - wywołanie funkcji. Funkcja jest zapisana niżej, ale JavaScript zna wszystkie deklaracje function przed wykonaniem pierwszej linii, więc wywołanie działa.

Podgląd: komórka „2” przy skrętce linkowej ma tło żółte, a pozostałe - Honeydew, jak na obrazie 2.

zamowienia.html HTML zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button>Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 45: Funkcja aktualizująca wywoływana przyciskiem wiersza

Kryteria: ,

R.3.3 Dla przynajmniej jednego przycisku do aktualizacji zdefiniowano obsługę zdarzenia kliknięcia (atrybut onClick lub słuchacz zdarzenia click lub właściwość onclick obiektu DOM)

R.5.2 Zapisano w skrypcie przynajmniej jedną funkcję, która jest przypisana do kliknięcia przycisku oraz zainicjowano wartością 0 zmienną przechowującą id zamówienia

ok. 2 min

Polecenie z arkusza

Funkcja aktualizująca – obraz 4: Wywoływana po przyciśnięciu przycisku w danym wierszu tabeli

Każdy przycisk „Aktualizuj” dostaje atrybut onclick z wywołaniem funkcji i numerem swojego wiersza: onclick="updateQuantity(1)" w pierwszym wierszu, updateQuantity(2) w drugim i tak dalej. Funkcja przyjmuje ten numer w parametrze row - po nim znajdzie właściwą komórkę quantity1 - quantity4. Jedna funkcja obsługuje więc wszystkie cztery przyciski (R.3.3, R.5.2).

zamowienia.html HTML zmienione: 7 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 46: Okno z polem „Podaj nową ilość:”

Kryteria:

R.5.5 Do aktualizacji wyświetlono okno prompt i pobrano z niego wartość

ok. 1 min

Polecenie z arkusza

Wyświetla okno z polem do wpisania wartości, podpisane: „Podaj nową ilość:”

Funkcja prompt wyświetla okno z napisem, polem tekstowym i przyciskami OK i Anuluj (obraz 4). Zwraca to, co wpisał użytkownik, zawsze jako napis - wynik trafia do zmiennej newQuantity (R.5.5).

Typowe błędy

alert pokazuje tylko komunikat bez pola, a confirm - pytanie z OK i Anuluj; pole do wpisania ma wyłącznie prompt.

zamowienia.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 47: Nowa ilość w kolumnie „Dostępna ilość”

Kryteria:

R.5.6 Po wciśnięciu przycisku do aktualizacji w dowolnym wierszu tabeli i wprowadzeniu wartości, jest ona widoczna w kolumnie "Dostępna ilość" tego wiersza

ok. 2 min

Polecenie z arkusza

Podaną w oknie wartość wpisuje do odpowiedniego wiersza, kolumny „Dostępna ilość”

Ten sam sposób szukania komórki co w funkcji zaznaczającej: "quantity" + row. Przypisanie do innerHTML (z tabeli 1) zastępuje zawartość komórki - po kliknięciu „Aktualizuj” przy skrętce drucianej i wpisaniu 0 w komórce stoi 0 (R.5.6).

zamowienia.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
            document.getElementById("quantity" + row).innerHTML = newQuantity;
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 48: Ponowne zaznaczenie braków po aktualizacji

Kryteria:

R.5.4 Przy załadowaniu strony oraz po aktualizacji wartości w tabeli, komórka zawierająca ilość ma tło czerwone, gdy wartość w niej jest równa 0 lub tło żółte, gdy wartość jest z przedziału <1, 5> lub Honeydew w innych przypadkach, należy sprawdzić w przeglądarce wszystkie stany

ok. 1 min

Polecenie z arkusza

Wywołuje funkcję zaznaczającą braki

Po zmianie wartości funkcja koloruje komórki od nowa. Sprawdzone w Chrome: wpisanie 0 przy skrętce drucianej daje tło czerwone, a skrętka linkowa z ilością 2 zostaje żółta - dokładnie obraz 3. Wpisanie z powrotem 20 przywraca Honeydew. Kolory są poprawne po załadowaniu strony i po każdej aktualizacji (R.5.4).

zamowienia.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td>Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
            <tr>
                <td>Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button>Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
            document.getElementById("quantity" + row).innerHTML = newQuantity;
            markShortages();
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 49: Funkcja zamawiająca: kolejny numer zamówienia

Kryteria: ,

R.3.4 Dla przynajmniej jednego przycisku do zamawiania zdefiniowano obsługę zdarzenia kliknięcia (atrybut onClick lub słuchacz zdarzenia click lub właściwość onclick obiektu DOM)

R.5.7 Realizacja zamówienia powoduje zwiększenie id zamówienia o 1

ok. 2 min

Polecenie z arkusza

Funkcja zamawiająca – obraz 5: Zwiększa o jeden id zamówienia

Przyciski „Zamów” dostają onclick="placeOrder(1)" - placeOrder(4) (R.3.4), a komórki z nazwą produktu identyfikatory product1 - product4, bo funkcja będzie potrzebować nazwy.

orderId++ zwiększa zmienną o jeden. Zmienna jest zadeklarowana poza funkcją, na początku skryptu, więc pamięta wartość między kliknięciami: pierwsze zamówienie ma numer 1, drugie 2 (R.5.7).

Typowe błędy

let orderId = 0; wpisane wewnątrz funkcji tworzy przy każdym kliknięciu nową zmienną - każde zamówienie miałoby numer 1.

zamowienia.html HTML zmienione: 12 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td id="product1">Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(1)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product2">Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(2)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product3">Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(3)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product4">Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(4)">Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
            document.getElementById("quantity" + row).innerHTML = newQuantity;
            markShortages();
        }

        function placeOrder(row) {
            orderId++;
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 50: Komunikat z numerem zamówienia i produktem

Kryteria: ,

R.5.8 Po wciśnięciu dowolnego przycisku do zamawiania wyświetlany jest komunikat o treści: „Zamówienie nr: <id zamówienia> Produkt: <nazwa produktu>”. Pola zapisane w <> wypełniane są kolejno wartością id zamówienia oraz nazwą produktu z kolumny „Produkt” danego wiersza tabeli

R.5.9 Komunikat o złożeniu zamówienia wyświetlany jest w oknie alert

ok. 3 min

Polecenie z arkusza

Wyświetla komunikat o treści: „Zamówienie nr: <id zamówienia> Produkt: <nazwa produktu>”. Pola zapisane w <> wypełniane są automatycznie wartością id_zamowienia oraz nazwą produktu z kolumny „Produkt” danego wiersza tabeli

Nazwa produktu to zawartość komórki product + numer wiersza. Napis skleja operator +: stałe kawałki ze spacjami w cudzysłowach i dwie zmienne. alert pokazuje go w oknie „Komunikat z bieżącej strony” (obraz 5).

Sprawdzone w Chrome: dwa kliknięcia „Zamów” przy skrętce drucianej dają kolejno „Zamówienie nr: 1 Produkt: Skrętka U/UTP drut” i „Zamówienie nr: 2 Produkt: Skrętka U/UTP drut” - drugi komunikat to dokładnie obraz 5 (R.5.8, R.5.9).

Typowe błędy

Brak spacji w stałych kawałkach skleja napis w „Zamówienie nr:1Produkt:”. Komunikat ma być w oknie alert - console.log albo wpis na stronie to brak punktu R.5.9.

zamowienia.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td id="product1">Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(1)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product2">Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(2)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product3">Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(3)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product4">Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(4)">Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
            document.getElementById("quantity" + row).innerHTML = newQuantity;
            markShortages();
        }

        function placeOrder(row) {
            orderId++;
            let product = document.getElementById("product" + row).innerHTML;
            alert("Zamówienie nr: " + orderId + " Produkt: " + product);
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Etap 5: Dobre praktyki (poza kluczem)

Kroki 51-53 · po tym etapie masz 41 z 41 kryteriów (pkt)

Krok 51: Zabezpieczenie: textContent zamiast innerHTML

ok. 3 min

Polecenie z arkusza

Podaną w oknie wartość wpisuje do odpowiedniego wiersza, kolumny „Dostępna ilość”

innerHTML traktuje przypisany napis jako kod HTML. Sprawdzone w Chrome na wersji z poprzednich kroków: wpisanie w okno prompt tekstu <img src=x onerror="alert('XSS')"> wstawia do komórki prawdziwy znacznik obrazka, przeglądarka próbuje wczytać plik x, a gdy się to nie udaje - wykonuje kod z atrybutu onerror i wyskakuje okno „XSS”. To jest wstrzyknięcie kodu (XSS). Tutaj szkodzi tylko osobie, która sama je wpisała, ale ten sam błąd w stronie, która zapisuje dane i pokazuje je innym, pozwala wykonać cudzy kod w każdej przeglądarce.

textContent wstawia napis jako zwykły tekst: po tej zmianie komórka pokazuje znaki <img …> dosłownie, a kod się nie wykonuje. Do liczb i napisów od użytkownika zawsze textContent; innerHTML tylko do własnego, zaufanego HTML-a. Stara linia zostaje w komentarzu.

zamowienia.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td id="product1">Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(1)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product2">Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(2)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product3">Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(3)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product4">Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(4)">Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
            // document.getElementById("quantity" + row).innerHTML = newQuantity;
            document.getElementById("quantity" + row).textContent = newQuantity;
            markShortages();
        }

        function placeOrder(row) {
            orderId++;
            let product = document.getElementById("product" + row).innerHTML;
            alert("Zamówienie nr: " + orderId + " Produkt: " + product);
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 52: Zabezpieczenie: sprawdzenie wartości z okna

ok. 4 min

Polecenie z arkusza

Wyświetla okno z polem do wpisania wartości, podpisane: „Podaj nową ilość:”

Wersja z egzaminu wpisuje do tabeli wszystko, co zwróci okno. Sprawdzone w Chrome:

Anuluj - prompt zwraca null, przypisanie null czyści komórkę, a Number("") to 0: ilość znika i komórka robi się czerwona, choć nikt niczego nie zmienił,
tekst abc zostaje w kolumnie „Dostępna ilość”, a Number("abc") to NaN - nie jest ani zerem, ani liczbą od 1 do 5, więc komórka dostaje Honeydew, jakby towaru było dużo.

Nowe linie: przy null funkcja kończy się instrukcją return bez zmian w tabeli; trim() zdejmuje spacje z brzegów; wartość pusta, niebędąca liczbą (isNaN), ułamkowa (Number.isInteger) albo ujemna kończy się komunikatem i również niczego nie zmienia. Sprawdzone: po Anuluj komórka zachowuje 20, a po „abc” - poprzednią wartość i okno z komunikatem.

zamowienia.html HTML zmienione: 8 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td id="product1">Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(1)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product2">Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(2)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product3">Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(3)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product4">Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(4)">Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
            if (newQuantity === null) {
                return;
            }
            newQuantity = newQuantity.trim();
            if (newQuantity === "" || isNaN(newQuantity) || !Number.isInteger(Number(newQuantity)) || Number(newQuantity) < 0) {
                alert("Ilość musi być liczbą całkowitą, co najmniej 0");
                return;
            }
            // document.getElementById("quantity" + row).innerHTML = newQuantity;
            document.getElementById("quantity" + row).textContent = newQuantity;
            markShortages();
        }

        function placeOrder(row) {
            orderId++;
            let product = document.getElementById("product" + row).innerHTML;
            alert("Zamówienie nr: " + orderId + " Produkt: " + product);
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Krok 53: Zabezpieczenie: odnośnik do obcej strony w nowej karcie

ok. 1 min

Polecenie z arkusza

Odnośnik do strony http://sieci.pl/ otwierany w nowej karcie przeglądarki i podpisany „Nasza strona internetowa”

Strona otwarta przez target="_blank" dostawała dawniej odwołanie do karty, z której ją otwarto (window.opener), i mogła po cichu podmienić jej adres, np. na fałszywą stronę logowania. rel="noopener" odcina to odwołanie, a noreferrer dodatkowo nie przekazuje obcej stronie adresu, z którego przyszedł użytkownik. Nowe przeglądarki dodają noopener do target="_blank" same, ale atrybut zapisany jawnie działa także w starszych. Na egzaminie nie jest wymagany.

zamowienia.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <section id="left">
        <h2>Aktualizacja i zamówienia materiałów</h2>
        <p>Do wewnętrznego użytku firmy</p>
        <img src="obraz.png" alt="sieć komputerowa">
    </section>
    <section id="right">
        <table>
            <tr>
                <th>Produkt</th>
                <th>Jednostka</th>
                <th>Dostępna ilość</th>
                <th>Aktualizacja</th>
                <th>Zamówienie</th>
            </tr>
            <tr>
                <td id="product1">Skrętka U/UTP drut</td>
                <td>metr</td>
                <td id="quantity1">20</td>
                <td><button onclick="updateQuantity(1)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(1)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product2">Skrętka U/UTP linka</td>
                <td>metr</td>
                <td id="quantity2">2</td>
                <td><button onclick="updateQuantity(2)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(2)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product3">Wtyki 8P8C</td>
                <td>sztuki</td>
                <td id="quantity3">10</td>
                <td><button onclick="updateQuantity(3)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(3)">Zamów</button></td>
            </tr>
            <tr>
                <td id="product4">Moduły Keystone</td>
                <td>sztuki</td>
                <td id="quantity4">30</td>
                <td><button onclick="updateQuantity(4)">Aktualizuj</button></td>
                <td><button onclick="placeOrder(4)">Zamów</button></td>
            </tr>
        </table>
    </section>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;
        markShortages();

        function updateQuantity(row) {
            let newQuantity = prompt("Podaj nową ilość:");
            if (newQuantity === null) {
                return;
            }
            newQuantity = newQuantity.trim();
            if (newQuantity === "" || isNaN(newQuantity) || !Number.isInteger(Number(newQuantity)) || Number(newQuantity) < 0) {
                alert("Ilość musi być liczbą całkowitą, co najmniej 0");
                return;
            }
            // document.getElementById("quantity" + row).innerHTML = newQuantity;
            document.getElementById("quantity" + row).textContent = newQuantity;
            markShortages();
        }

        function placeOrder(row) {
            orderId++;
            let product = document.getElementById("product" + row).innerHTML;
            alert("Zamówienie nr: " + orderId + " Produkt: " + product);
        }

        function markShortages() {
            for (let i = 1; i <= 4; i++) {
                let cell = document.getElementById("quantity" + i);
                let value = Number(cell.innerHTML);
                if (value == 0) {
                    cell.style.backgroundColor = "red";
                } else if (value >= 1 && value <= 5) {
                    cell.style.backgroundColor = "yellow";
                } else {
                    cell.style.backgroundColor = "Honeydew";
                }
            }
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (zamowienia.html)

Etap 6: Oddanie pracy
Krok 54 · po tym etapie masz 41 z 41 kryteriów (pkt)
Krok 54: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
Po zakończeniu pracy utwórz w folderze z numerem, którym został podpisany arkusz, plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego muszą być: grants.png, import.jpg, kw1.png - kw4.png, kwerendy.txt, obraz.png, przeglądarka.txt, styl4.css i zamowienia.html (pliki z archiwum mogą zostać). Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego. Pusta lub nieczytelna płyta to zero punktów za wszystkie pięć rezultatów.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 53.

To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.

Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.

Rozwiązanie krok po kroku: Zamówienia materiałów do sieci komputerowych (Wersja podstawowa)

Etap 1: Baza danych

Krok 1: Folder zdającego i archiwum zad4.zip

Krok 2: XAMPP i baza firma z polskim porównywaniem

Krok 3: Import tabel z pliku baza.sql i zrzut import.jpg

Krok 4: Zapytanie 1: materiały powyżej 9 sztuk z producentem

Krok 5: Zapytanie 2: materiał, producent i jednostka

Krok 6: Zapytanie 3: użytkownik zaopatrzenie

Krok 7: Zapytanie 4: prawa do rekordów w bazie firma

Krok 8: SHOW GRANTS i zrzut grants.png

Etap 2: Grafika i strona HTML

Krok 9: Grafika: tło przezroczyste

Krok 10: Grafika: szerokość 300 px z zachowaniem proporcji

Krok 11: Grafika: zapis jako obraz.png

Krok 12: Plik zamowienia.html

Krok 13: Szkielet HTML5

Krok 14: Kodowanie polskich znaków

Krok 15: Język strony

Krok 16: Tytuł strony

Krok 17: Podpięcie arkusza stylów styl4.css

Krok 18: Bloki: baner, lewy, prawy i stopka

Krok 19: Baner: nagłówek pierwszego stopnia

Krok 20: Blok lewy: nagłówek drugiego stopnia

Krok 21: Blok lewy: paragraf

Krok 22: Blok lewy: grafika z tekstem alternatywnym

Krok 23: Blok prawy: tabela i wiersz nagłówkowy

Krok 24: Wiersze 2-5: napisy z pliku tabela.txt

Krok 25: Czwarta kolumna: przyciski „Aktualizuj”

Krok 26: Piąta kolumna: przyciski „Zamów”

Krok 27: Stopka: odnośnik otwierany w nowej karcie

Krok 28: Stopka: paragraf z autorem strony

Etap 3: Styl CSS

Krok 29: Plik styl4.css: Verdana i wyśrodkowanie dla wszystkich

Krok 30: Baner: tło DarkGreen, biały tekst, marginesy wewnętrzne

Krok 31: Blok lewy: tło PaleGreen i wymiary

Krok 32: Blok prawy: tło Honeydew, wymiary i margines górny

Krok 33: Stopka: tło PaleGreen i marginesy wewnętrzne

Krok 34: Układ bloków zgodny z obrazem 2

Krok 35: Tabela i komórki: obramowanie DarkGreen, połączone

Krok 36: Tabela: marginesy automatyczne i szerokość 95%

Krok 37: Komórki: marginesy wewnętrzne 20 px i 0

Krok 38: Przycisk: tło DarkGreen, biały tekst, marginesy wewnętrzne

Krok 39: Przycisk pod kursorem myszy

Etap 4: JavaScript

Krok 40: Funkcja zaznaczająca braki: odczyt ilości z każdego wiersza

Krok 41: Ilość 0: tło czerwone

Krok 42: Ilość od 1 do 5: tło żółte

Krok 43: Pozostałe ilości: tło Honeydew

Krok 44: Start skryptu: zaznaczenie braków i numer zamówienia

Krok 45: Funkcja aktualizująca wywoływana przyciskiem wiersza

Krok 46: Okno z polem „Podaj nową ilość:”

Krok 47: Nowa ilość w kolumnie „Dostępna ilość”

Krok 48: Ponowne zaznaczenie braków po aktualizacji

Krok 49: Funkcja zamawiająca: kolejny numer zamówienia

Krok 50: Komunikat z numerem zamówienia i produktem

Etap 5: Dobre praktyki (poza kluczem)

Krok 51: Zabezpieczenie: textContent zamiast innerHTML

Krok 52: Zabezpieczenie: sprawdzenie wartości z okna

Krok 53: Zabezpieczenie: odnośnik do obcej strony w nowej karcie

Etap 6: Oddanie pracy

Krok 54: Plik przeglądarka.txt i nagranie płyty

Podgląd