Egzamin: Kwalifikacja E.14, Rodzaj: egzamin praktyczny, Oznaczenie: E.14-09-18.01, Termin: styczeń 2018

Zaprojektuj zapytania SQL do bazy szkoła, wykonaj zrzuty ekranu przedstawiające efekty działania przygotuj grafiki przeznaczone do umieszczenia na stronie internetowej oraz witrynę Wykorzystaj środowisko XAMPP, edytor zaznaczający składnię HTML oraz grafiki rastrowej.
Na stanowisku egzaminacyjnym znajduje się komputer z zainstalowanym systemem i oprogramowaniem, a także dokumentacja w postaci spisu zainstalowanego oprogramowania. zaloguj się konto Egzamin bez hasła. Wyniki swojej pracy zapisz w folderze. Jako nazwy folderu użyj swojego numeru PESEL. Folder umieść na pulpicie konta Egzamin. Wewnątrz folderu utwórz dwa podfoldery o nazwach: baza oraz www.

Baza danych

Na pulpicie konta Egzamin znajduje się archiwum ZIP o nazwie zad3.zip. Archiwum jest zabezpieczone hasłem szko!a_3.

Jego zawartość to plik szkola.sql zawierający przygotowane do importu tabele bazy danych szkoła.

Zawartość pliku szkola.sql:

-- phpMyAdmin SQL Dump
-- version 4.5.0.2
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Czas generowania: 03 Mar 2016, 13:23
-- Wersja serwera: 10.0.17-MariaDB
-- Wersja PHP: 5.6.14

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Baza danych: `szkola`
--

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `klasa`
--

CREATE TABLE `klasa` (
  `id` int(11) NOT NULL DEFAULT '0',
  `nazwa` varchar(2) CHARACTER SET utf8 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `klasa`
--

INSERT INTO `klasa` (`id`, `nazwa`) VALUES
(1, '1a'),
(2, '1b'),
(3, '2a'),
(4, '2b');

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `uczen`
--

CREATE TABLE `uczen` (
  `id` int(2) NOT NULL DEFAULT '0',
  `Nazwisko` varchar(11) DEFAULT NULL,
  `Imie` varchar(11) DEFAULT NULL,
  `Srednia_ocen` float NOT NULL,
  `id_klasy` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Zrzut danych tabeli `uczen`
--

INSERT INTO `uczen` (`id`, `Nazwisko`, `Imie`, `Srednia_ocen`, `id_klasy`) VALUES
(1, 'Kluska', 'Zenon', 4.5, 1),
(2, 'Zawada', 'Zbigniew', 3.6, 1),
(3, 'Cap', 'Antoni', 3.5, 2),
(4, 'Kowalski', 'Sebastian', 4, 3),
(5, 'Dawid', 'Andrzej', 4.5, 2),
(6, 'Kaczmarek', 'Marta', 3, 4),
(7, 'Kowalski', 'Jan', 3.5, 4),
(8, 'Polak', 'Maria', 4.8, 2),
(9, 'Michalak', 'Paweł', 4, 3),
(10, 'Góral', 'Łukasz', 3.6, 4),
(11, 'Nowak', 'Jan', 4.8, 4),
(12, 'Kowalski', 'Łukasz', 4.5, 1),
(13, 'Markiewicz', 'Damian', 3.5, 3),
(14, 'Baryła', 'Zenon', 4, 2),
(15, 'Gota', 'Anna', 3, 4),
(16, 'Małek', 'Justyna', 3.6, 1),
(17, 'Rysik', 'Magda', 4.8, 3),
(18, 'Szary', 'Tomasz', 3, 1),
(19, 'Bury', 'Łukasz', 4.5, 3),
(20, 'Rudy', 'Wojciech', 3.5, 2),
(21, 'Kowalska', 'Janina', 3, 2),
(22, 'Nowak', 'Jan', 4.5, 1),
(23, 'Kowalik', 'Stanisława', 4, 3),
(24, 'Nowakowski', 'Grzegorz', 3.6, 1),
(25, 'Kwiatkowska', 'Jolanta', 3.5, 2),
(26, 'Konarski', 'Krzysztof', 4.5, 3);

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `wychowawca`
--

CREATE TABLE `wychowawca` (
  `id` int(11) NOT NULL DEFAULT '0',
  `imie` varchar(20) CHARACTER SET utf8 NOT NULL,
  `nazwisko` varchar(30) CHARACTER SET utf8 NOT NULL,
  `id_klasy` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `wychowawca`
--

INSERT INTO `wychowawca` (`id`, `imie`, `nazwisko`, `id_klasy`) VALUES
(1, 'Jan', 'Bogucki', 1),
(2, 'Michał', 'Więcek', 2),
(3, 'Bożena', 'Michalska', 3),
(4, 'Krystyna', 'Piętkiewicz', 4);

--
-- Indeksy dla zrzutów tabel
--

--
-- Indexes for table `klasa`
--
ALTER TABLE `klasa`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `uczen`
--
ALTER TABLE `uczen`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `wychowawca`
--
ALTER TABLE `wychowawca`
  ADD PRIMARY KEY (`id`);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Baza danych szkoła składa się z trzech tabel: uczen, klasa, wychowawca. Wszystkie tabele posiadają klucz podstawowy o nazwie id. Opis tabel jest następujący:
1. Tabela uczen

a. przechowuje: informacje o wybranych uczniach klas 1a, 1b, 2a i 2b szkoły ponadgimnazjalnej
b. pola: imie i nazwisko typu tekstowego oraz id, id klasy i srednia_ocen typu liczbowego (pole średnia ocen przechowuje liczby rzeczywiste),
c. pole id klasy jest kluczem obcym powiązanym z kluczem podstawowym tabeli klasa.

2. Tabela wychowawca

a. przechowuje: informacje o wychowawcach klas 1a, 1b, 2a i 2b,
b. pola: imie i nazwisko typu tekstowego oraz id i id klasy typu liczbowego,
c. pole id klasy jest kluczem obcym powiązanym z kluczem podstawowym tabeli klasa.

3. Tabela klasa

a. przechowuje: informacje o klasach la, lb, 2a i 2b,
b. pola: nazwa typu tekstowego oraz id typu liczbowego.

Zapytania do bazy

Za pomocą narzędzia XAMPP Control Panel uruchom usługę Apache oraz MySQL, przejdź do narzędzia phpMyAdmin. Wykonaj następujące czynności:

1. Utwórz bazę danych o nazwie szkoła,
2. Do bazy szkoła zaimportuj tabele z pliku szkolasql z wcześniej rozpakowanego archiwum,
3. W podfolderze baza utwórz plik zapytania txt,
4. Zapisz i wykonaj zapytania SQL działające na bazie szkoła. Zapytania zapisz w pliku kwerendy.txt, w podfolderze baza. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG, w podfolderze baza jako: kwerendal .png, kwerenda2.png, nowy_uzytkownik.png i uprawnienia.png. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań:
   Zapytanie l: zapisujące w tabeli klasa nowy rekord danych: id—5, nazwa—3a
   Zapytanie 2: wyświetlające jedynie wszystkie klasy oraz średnią obliczoną ze wszystkich średnich ocen uczniów zgrupowanych w danej klasie
   zapytanie 3: tworzące użytkownika Dyrektor na localhost z hasłem zapytanie 4: nadające prawa dla użytkownika Dyrektor pełne uprawnienia do wszystkich tabel
5. Wyeksportuj bazę danych jako szkola_nowasql, plik eksportu umieść w podfolderze bcza.

Witryna internetowa

Stwórz prostą witrynę składającą się z jednej strony internetowej o nazwie index.html. Plik zapisz rll w podfolderze www (który znajduje się w folderze nazwanym Twoim numerem PESEL). Wygląd witryny:

 

Przygotowanie grafik:

Wykorzystując zrzuty ekranowe kwerend przygotuj grafiki dla witryny internetowej:

1. zrzuty ekranowe wykadruj tak, aby były widoczne tylko efekty działania zapytań, nie powinny być widoczne inne elementy okna przeglądarki oraz panelu phpMyAdmin,
2. przeskaluj obrazy tak, aby ich szerokość wynosiła 400 px, a wysokość 200 px,
3. obrazy zapisz w formacie JPG, w podfolderze www, jako kwerendal.jpg, kwerenda2.jpg, oraz nowy_uzytkownik.jpg i uprawniena.jpg.

UWAGA: pliki z podfolderu baza pozostaw niezmienione, nie nadpisuj ich.

Wymagania odnośnie witryny:

1. zastosowany właściwy standard kodowania polskich znaków,
2. tytuł strony: „Szkoła ponadgimnazjalna”,
3. strona podzielona za pomocą znaczników sekcji na baner, panele lewy i prawy oraz stopkę, tak ab po uruchomieniu strony w przeglądarce wygląd był zgodny z obrazem l,
4. zawartość banera: nagłówek pierwszego stopnia o treści: „Projekt strony internetowej szk ponadgimnazjalnej”,
5. zawartość panelu lewego:
   a. tabela o rozmiarach 5 wierszy i 2 kolumny,
   b. szerokość prawej kolumny tabeli: 405 px,
   c. komórki wiersza nagłówkowego zawierają kolejno wpisy: “Treść zapytania” i “Zrzut ekranu”
   d. w komórkach tabeli w kolejnych wierszach: treść zapytań z pliku zapytania.txt i obok odpowiadające im zrzuty ekranu w formacie JPG
   e. obrazy powinny posiadać tekst alternatywny zawierający nazwę pliku
6. zawartość panelu prawego:
   a. nagłówek drugiego stopnia o treści: “Do pobrania”,
   b. poniżej w postaci listy punktowanej dwa odnośniki:
   – “zapytania SQL”,
   – “baza danych”,
   c. kliknięcie odnośnika o treści: “zapytania SQL”, powoduje pobranie/wyświetlenie pliku zapytania.txt z podfolderu baza,
   d. kliknięcie odnośnika o treści: „baza danych”, powoduje pobranie/wyświetlenie pliku szkola_nowa.sql z podfolderu baza,
   e. poniżej linia pozioma przez całą szerokość panelu prawego,
   f. poniżej napis w nagłówku trzeciego stopnia: „Wyznaczanie najniższej średniej”
   g. poniżej lista punktowana z nazwiskami: Polak, Nowak, Rysik, obok każdego nazwiska pole edycyjne typu tekstowego przeznaczone na wpisanie średniej ocen ucznia,
   h. poniżej przycisk z etykietą „wyznacz”,
   i. poniżej napis w nagłówku trzeciego stopnia „Najniższa średnia:”
   7. zawartość stopki: nagłówek trzeciego stopnia o treści: „stronę wykonał: , w miejsce kropek wpisany Twój numer PESEL.

Styl CSS witryny internetowej

Styl elementów witryny zdefiniuj przy pomocy języka CSS, w osobnym pliku o nazwie styl.css, plik ten zapisz w podfolderze www oraz prawidłowo dołącz do pliku z kodem strony.

Wymagania odnośnie stylu CSS:

1. kolor czcionki odnośników: żółty
2. kolor tła banera, stopki oraz panelu prawego: #5957a1,
3. kolor tła panelu lewego: #bbadcd,
4. wyrównanie tekstu banera i stopki: do środka,
5. wyrównanie tekstu panelu prawego: do środka,
6. krój czcionki dla całej strony: Arial,
7. kolor czcionki dla całej strony: biały,
8. marginesy wewnętrzne banera: 10 px,
9. szerokość panelu lewego: 65%,
10. szerokość panelu prawego: 35%,
11. wysokość paneli lewego i prawego: 450 px,
12. wysokość banera: 70 px,
13. wysokość stopki: 50 px,
14. kolor poziomej linii w prawym panelu: żółty,
15. punktor list w panelu prawym: kwadrat,
16. wszystkie komórki tabeli obramowane ramką czarną kreskowaną szerokości I px,
17. włączone paski przewijania dla panelu lewego.

Skrypt wyznaczający najniższą średnią ocen

1. wykonywany po stronie klienta
2. powinien wykonywać działania na liczbach rzeczywistych,
3. po kliknięciu przycisku „wyznacz” skrypt pobiera dane z trzech pól edycyjnych typu tekstowego,
4. jeżeli przynajmniej jedno z pól jest puste lub do któregoś pola wpisano ciąg znaków, który nie jest poprawną liczbą rzeczywistą skrypt powinien wyświetlić w osobnym oknie komunikat „wpisz poprawne dane”,
5. w przeciwnym przypadku skrypt powinien przekonwertować ciągi znaków na liczby rzeczywiste,
6. następnie skrypt powinien poprawnie wyznaczyć najniższą spośród trzech średnich ocen,
7. na koniec skrypt powinien wyświetlić wyznaczoną najniższą średnią poniżej napisu „Najniższa średnia” w prawym panelu.

Uwaga: po zakończeniu pracy nagraj płytę z rezultatami pracy. W folderze z Twoim numerem PESEL powinny się znajdować podfoldery: baza oraz www. W podfolderze baza powinny znajdować się pliki:
szkoła nowa.sql, zapytania.txt, kwerendal.png, kwerenda2.png, nowy uzytkownik.png i uprawnienia.png.
W podfolderze www powinny znajdować się pliki: kwerendal.jpg, kwerenda2.jpg, nowy uzytkownik.jpg i uprawnienia.jpg oraz index.html, styl.css, ewentualnie inne przygotowane pliki.

Utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Zapisz go na płycie jako przegladarka.txt. Po nagraniu płyty, sprawdź poprawność nagrania. opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowisku.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenia będą podlegać 4 rezultaty:
– operacje na bazie danych,
– utworzona strona internetowa,
– zdefiniowany styl CSS strony internetowej,
– skrypt.