INF.03 · część praktyczna · arkusz ćwiczeniowy nr 4 · wariant PHP

Pizzeria

Czas na wykonanie zadania: 150 minut. Ocenie podlega 5 rezultatów.

Materiał ćwiczeniowy TablicaPro, wzorowany na budowie arkuszy części praktycznej egzaminu INF.03. To autorskie zadanie — nie jest arkuszem opracowanym przez CKE. Rozwiązanie wzorcowe i schemat punktowania: strona rozwiązania (najpierw spróbuj samodzielnie).

Instrukcja

1. Pobierz archiwum z plikami: arkusz-04-pliki.zip i rozpakuj je.
2. Na pulpicie utwórz folder o nazwie równej wymyślonemu numerowi zdającego (11 cyfr). Wszystkie wyniki zapisuj w tym folderze.
3. Zadanie wykonaj samodzielnie, ograniczając się do wiedzy i narzędzi dostępnych na stanowisku egzaminacyjnym.
4. Po zakończeniu sprawdź, czy w folderze są wszystkie pliki z listy na końcu arkusza.
5. Oceń własną pracę według schematu na stronie rozwiązania — próg zaliczenia części praktycznej egzaminu wynosi 75% punktów.

Zadanie egzaminacyjne

Numer zdającego (w ćwiczeniu — wymyślony 11-cyfrowy numer) jest nazwą folderu z wynikami i trafia do stopki strony.

Wykonaj stronę zamówień internetowych pizzerii, wykorzystując edytor grafiki rastrowej, pakiet XAMPP oraz edytor zaznaczający składnię.

Operacje na bazie danych

Baza danych zawiera połączone relacją tabele przedstawione na ilustracji 1. Pole wegetarianska w tabeli pizze przyjmuje wartość 1 dla pizz bezmięsnych, pole dostepna — wartość 1 dla pizz aktualnie dostępnych w ofercie, a pole status w tabeli zamowienia — jedną z wartości: nowe lub zrealizowane.

Za pomocą narzędzia phpMyAdmin wykonaj następujące operacje na bazie danych:

• Utwórz bazę danych o nazwie pizzeria, z zestawem polskich znaków (np. utf8_polish_ci)
• Z rozpakowanego archiwum zaimportuj tabele z pliku pizzeria.sql do utworzonej bazy
• Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
• Wykonaj zapytania SQL działające na bazie pizzeria. Zapytania zapisz w pliku kwerendy.txt. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4, kw5, kw6. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
  • Zapytanie 1: wybierające jedynie pola id, nazwa, skladniki i cena wszystkich pizz, posortowane rosnąco według ceny
  • Zapytanie 2: wybierające jedynie pola id i nazwa pizz, które są obecnie dostępne w ofercie
  • Zapytanie 3: wybierające jedynie identyfikator zamówienia, imię i nazwisko klienta, nazwę pizzy, ilość i datę zamówienia dla zamówień o statusie nowe, posortowane rosnąco według daty. Należy posłużyć się relacją
  • Zapytanie 4: wybierające jedynie nazwy trzech najczęściej zamawianych pizz oraz łączną liczbę zamówionych sztuk każdej z nich; kolumna z łączną liczbą sztuk ma nazwę (alias) „Sprzedane sztuki”. Należy posłużyć się relacją
  • Zapytanie 5: obniżające o 10% cenę wszystkich pizz tańszych niż 30 zł
  • Zapytanie 6: dodające do tabeli pizze pole kalorie typu całkowitoliczbowego

Grafika

Na potrzeby witryny internetowej przygotuj grafiki:

• Plik pizza.jpg, wypakowany z archiwum, należy wykadrować do prostokąta o wymiarach 600 px na 400 px, wycinając go ze środka obrazu (po 150 px usuwamy z lewej i z prawej krawędzi, po 100 px z górnej i z dolnej), a następnie przeskalować z zachowaniem proporcji do szerokości 300 px. Plik należy zapisać pod tą samą nazwą.
• Plik tlo.jpg, wypakowany z archiwum, jest kafelkiem tła strony. Należy go przeskalować do wymiarów 100 px na 100 px i zapisać pod tą samą nazwą.
• Plik logo.png, wypakowany z archiwum, należy zmodyfikować w następujący sposób:
  • białe tło zastąpić przezroczystością
  • skadrować tak, aby kształt wypełniał całość obrazu
  • przeskalować z zachowaniem proporcji do wysokości 80 px
  • zapisać pod tą samą nazwą z zachowaniem przezroczystości

Witryna internetowa

Cechy witryny:

• Składa się ze strony o nazwie index.php
• Zapisana w języku HTML5
• Zadeklarowany polski język zawartości witryny
• Jawnie zastosowany właściwy standard kodowania polskich znaków
• Tytuł strony widoczny na karcie przeglądarki: „Pizzeria Bella”
• Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
• Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 2
• Zawartość bloku nagłówkowego: obraz logo.png z tekstem alternatywnym „logo pizzerii” oraz nagłówek pierwszego stopnia o treści „Pizzeria Bella”
• Zawartość bloku nawigacyjnego: sześć odnośników o treści kwerenda1, kwerenda2, kwerenda3, kwerenda4, kwerenda5, kwerenda6, prowadzących do plików zawierających zrzuty ekranu odpowiednich kwerend
• Zawartość bloku bocznego: nagłówek drugiego stopnia o treści „Zamów online”; formularz wysyłający dane metodą bezpieczną do tego samego pliku, zawierający: listę rozwijaną wypełnioną skryptem 2, pole tekstowe na imię i nazwisko, pole liczbowe na ilość sztuk (wartość domyślna 1, wartość minimalna 1) oraz przycisk o treści „Zamów”; efekt działania skryptu 3; obraz pizza.jpg z tekstem alternatywnym „pizza”
• Zawartość bloku głównego: nagłówek drugiego stopnia o treści „Nasze pizze”; efekt działania skryptu 1; nagłówek drugiego stopnia o treści „Zamówienia w realizacji”; efekt działania skryptu 4
• Zawartość stopki: paragraf o treści „Pizzeria Bella, ul. Włoska 5 · autor strony: ”, dalej wstawiony numer zdającego

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styl.css. Cechy formatowania CSS, działające na stronie:

• Domyślnie dla wszystkich selektorów: krój czcionki Verdana, w przypadku braku sans-serif; model pudełkowy border-box
• Dla selektora ciała strony: marginesy zewnętrzne 0, tło w postaci obrazu tlo.jpg (powtarzanego)
• Wspólne dla bloku nagłówkowego i stopki: kolor tła #B71C1C, biały kolor czcionki, marginesy wewnętrzne 10 px, wyrównanie tekstu do środka
• Dla bloku nagłówkowego: obraz logo.png wyświetlany z lewej strony nagłówka; nagłówek pierwszego stopnia pisany wielkimi literami z odstępem między znakami 3 px
• Dla bloku nawigacyjnego: kolor tła #FFD54F, wyrównanie tekstu do środka
• Dla odnośników w bloku nawigacyjnym: wyświetlanie jako bloki liniowe, marginesy wewnętrzne 8 px na 16 px, kolor czcionki #B71C1C, czcionka pogrubiona, bez podkreślenia; gdy kursor znajdzie się na odnośniku, kolor tła zmienia się na #B71C1C, a kolor czcionki na biały
• Dla bloku bocznego: szerokość 30%, kolor tła #FFF8E1, marginesy wewnętrzne 10 px, element opływany z lewej strony
• Dla bloku głównego: szerokość 70%, kolor tła #FFFDE7, marginesy wewnętrzne 10 px, element opływany z lewej strony
• Dla stopki: zakończenie opływania elementów z obu stron
• Dla pól formularza (lista rozwijana i pola wprowadzania): wyświetlanie jako bloki, szerokość 100%, marginesy zewnętrzne dolne 8 px, marginesy wewnętrzne 6 px; gdy pole jest aktywne, kolor jego tła zmienia się na #FFF9C4, a obramowanie na linię ciągłą o szerokości 2 px i kolorze #B71C1C
• Dla przycisku: kolor tła #B71C1C, biały kolor czcionki, brak obramowania, marginesy wewnętrzne 8 px na 20 px, zaokrąglenie rogów 6 px, kursor w postaci wskazującej dłoni
• Dla klasy pizza, przypisanej do bloków generowanych przez skrypt 1: dolne obramowanie linią kreskowaną o szerokości 1 px i kolorze #B71C1C, marginesy wewnętrzne 6 px na 0
• Dla nagłówka trzeciego stopnia w bloku klasy pizza: brak marginesów zewnętrznych, kolor czcionki #B71C1C; dla ostatniego paragrafu w bloku klasy pizza: czcionka pogrubiona
• Dla tabeli: szerokość 100%, scalone obramowania komórek; dla komórek: tylko dolne obramowanie linią ciągłą o szerokości 1 px i kolorze #B71C1C, marginesy wewnętrzne 5 px
• Dla obrazu w bloku bocznym: szerokość 100%, zaokrąglenie rogów 10 px; po najechaniu kursorem obraz powiększa się 1,05 raza, a zmiana trwa 0,3 s

Uwaga: styl CSS tabeli, komórek tabeli i przycisku należy zdefiniować wyłącznie przy pomocy selektorów tych znaczników. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypty połączenia z bazą

W tabeli 1 zamieszczono wybrane funkcje PHP do obsługi bazy danych. Wymagania dotyczące skryptów:

• Napisane w języku PHP
• Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim
• Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie pizzeria
• Na końcu działania skrypty zamykają połączenie z serwerem

Skrypt 1

• Wysyła do bazy danych zapytanie 1
• Dla każdego zwróconego wiersza tworzy blok z przypisaną klasą CSS pizza, zawierający: nagłówek trzeciego stopnia z nazwą pizzy; paragraf ze składnikami; paragraf o treści „Cena: <cena> zł”

Skrypt 2

• Wysyła do bazy danych zapytanie 2
• Każdy zwrócony wiersz zapisuje jako opcję listy rozwijanej: identyfikator pizzy jest przypisany do atrybutu value, a treścią opcji jest nazwa pizzy

Skrypt 3, wykonywany tylko wtedy, gdy formularz wysłał dane

• Wysyła do bazy danych zapytanie dodające do tabeli zamowienia nowy rekord: identyfikator pizzy, imię i nazwisko oraz ilość pochodzą z formularza, data jest datą bieżącą, a status ma wartość nowe
• Po dodaniu zamówienia wyświetla paragraf o treści „Dziękujemy, <imię i nazwisko>! Zamówienie zostało przyjęte.”

Skrypt 4

• Jeżeli do strony przekazano parametr usun metodą GET, wysyła do bazy danych zapytanie usuwające z tabeli zamowienia rekord o identyfikatorze równym wartości tego parametru
• Następnie wysyła do bazy danych zapytanie 3 i wyświetla wyniki w tabeli z wierszem nagłówkowym o treści: Nr, Klient, Pizza, Ilość, Data, Anuluj
• W ostatniej komórce każdego wiersza umieszcza odnośnik o treści „Anuluj” prowadzący do pliku index.php i przesyłający metodą GET identyfikator zamówienia w parametrze usun

Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB

Tabela 2. Modyfikacja danych w bazie

Polecenia INSERT, UPDATE i DELETE wysyła się do bazy funkcją mysqli_query(), tak samo jak zapytania SELECT; zamiast zestawu wierszy funkcja zwraca wtedy TRUE lub FALSE. Data bieżąca w SQL: CURDATE(). Wartość liczbową z formularza można zamienić na liczbę całkowitą rzutowaniem (int).

Zawartość folderu na zakończenie

W folderze z numerem zdającego powinny się znajdować pliki: import.png, kw1.png, kw2.png, kw3.png, kw4.png, kw5.png, kw6.png, kwerendy.txt, przeglądarka.txt, styl.css, index.php, pizza.jpg, tlo.jpg, logo.png oraz ewentualnie inne przygotowane pliki.

Ocenie podlegać będzie 5 rezultatów: operacje na bazie danych, zawartość witryny internetowej, działanie witryny internetowej, styl CSS witryny internetowej, skrypt.