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

Wypożyczalnia rowerów

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-01-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 aplikację internetową wypożyczalni rowerów, 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 dostepny w tabeli rowery przyjmuje wartość 1, gdy rower jest dostępny, oraz 0 — w przeciwnym wypadku.

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

• Utwórz bazę danych o nazwie rowery, z zestawem polskich znaków (np. utf8_polish_ci)
• Z rozpakowanego archiwum zaimportuj tabele z pliku rowery.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 rowery. 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. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
  • Zapytanie 1: wybierające jedynie pola marka, model, typ i cena_doba wszystkich rowerów, posortowane rosnąco według marki, a w obrębie marki według modelu
  • Zapytanie 2: wybierające jedynie pola id, marka i model rowerów dostępnych (pole dostepny równe 1)
  • Zapytanie 3: wybierające jedynie pola marka, model i cena_doba roweru o identyfikatorze równym 3
  • Zapytanie 4: liczące średnią cenę za dobę wszystkich rowerów, zaokrągloną do liczby całkowitej, oraz wybierające najwyższą cenę za dobę; nazwy kolumn (aliasy) odpowiednio: „Średnia cena”, „Najdroższy”
  • Zapytanie 5: wybierające jedynie nazwisko i imię klienta, markę i model wypożyczonego roweru oraz liczbę dni dla wypożyczeń trwających dłużej niż 5 dni. Należy posłużyć się relacją

Grafika

Na potrzeby witryny internetowej przygotuj grafiki:

• Plik rower.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 400 px. Plik należy 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 głównej o nazwie index.php oraz podstrony regulamin.html. W pliku regulamin.html należy zapisać jedynie napis „Regulamin”
• 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: „Wypożyczalnia rowerów”
• 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ą 3
• Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „Wypożyczalnia rowerów”
• Zawartość bloku nawigacyjnego: lista punktowana (nieuporządkowana) z trzema odnośnikami: „Oferta” prowadzący do strony index.php, „Regulamin” prowadzący do strony regulamin.html oraz „Mapa tras” prowadzący do strony https://mapy.example.pl, otwierany w nowym oknie przeglądarki
• Zawartość bloku głównego: blok sekcji lewej i blok sekcji prawej
• Zawartość bloku sekcji lewej: nagłówek drugiego stopnia o treści „Rowery w ofercie” oraz tabela z czterema kolumnami: pierwszy wiersz zawiera komórki nagłówkowe „Marka”, „Model”, „Typ”, „Cena za dobę”; pozostałe wiersze wypełnia skrypt 1
• Zawartość bloku sekcji prawej: nagłówek drugiego stopnia o treści „Oblicz koszt”; obraz rower.jpg z tekstem alternatywnym „Rower górski”; formularz wysyłający dane metodą bezpieczną do tego samego pliku, zawierający: etykietę „Rower: ” powiązaną z listą rozwijaną wypełnioną skryptem 2, etykietę „Liczba dni: ” powiązaną z polem edycyjnym przeznaczonym do wpisywania jedynie liczb całkowitych (od 1) oraz przycisk o treści „Oblicz” wysyłający dane z formularza do skryptu 3; blok, w którym umieszczony jest efekt działania skryptu 3
• Zawartość stopki: paragraf o treści „Stronę wykonał: ”, 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
• Wspólne dla bloku nagłówkowego i stopki: kolor tła #2E7D32, biały kolor czcionki, marginesy wewnętrzne 10 px, wyrównanie tekstu do środka
• Dla bloku nawigacyjnego: kolor tła #A5D6A7, marginesy wewnętrzne 8 px
• Dla selektora elementu listy: sposób wyświetlania liniowo-blokowy, bez punktorów
• Dla selektora odnośnika: kolor czcionki #1B5E20, bez podkreślenia, jedynie zewnętrzny margines prawy 25 px; gdy kursor znajdzie się na odnośniku, dodawane jest podkreślenie
• Wspólne dla bloków sekcji lewej i prawej: szerokość 50%, wysokość 450 px, paski przewijania pojawiające się tylko w przypadku przepełnienia bloku
• Dodatkowo kolor tła sekcji lewej to #E8F5E9, a sekcji prawej #C8E6C9
• Wspólne dla selektora tabeli, komórki tabeli i komórki nagłówkowej: obramowanie linią ciągłą o szerokości 1 px i kolorze #2E7D32
• Dodatkowo dla selektora tabeli: szerokość 90%, linie obramowania połączone, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę
• Gdy kursor znajdzie się na wierszu tabeli, jego kolor tła zmienia się na #A5D6A7
• Dla selektora obrazu: szerokość 60%, zaokrąglenie rogów 10 px, cień o przesunięciu 5 px w obu osiach, rozmyciu 10 px i kolorze DimGray
• Dla pola edycyjnego i przycisku: marginesy zewnętrzne 8 px

Uwaga: styl CSS tabeli, komórki tabeli, obrazu i elementu listy należy zdefiniować wyłącznie przy pomocy selektora tego znacznika. 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 rowery
• Na końcu działania skrypty zamykają połączenie z serwerem

Skrypt 1

• Wysyła do bazy danych zapytanie 1
• Każdy zwrócony wiersz wypisuje w kolejnym wierszu tabeli, w czterech komórkach; w czwartej komórce za ceną dopisuje „ zł”

Skrypt 2

• Wysyła do bazy danych zapytanie 2
• Każdy zwrócony wiersz zapisuje jako opcję listy rozwijanej w ten sposób, że identyfikator jest przypisany do atrybutu value, a treścią opcji są marka i model oddzielone spacją

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

• Wysyła do bazy danych zapytanie 3, zmodyfikowane w ten sposób, że w warunku podany jest identyfikator roweru wysłany z formularza
• Oblicza koszt wypożyczenia jako iloczyn ceny za dobę i liczby dni wysłanej z formularza; gdy liczba dni jest większa niż 7, koszt jest pomniejszany o 10%
• Wyświetla w paragrafie tekst według wzoru: „Rower: <marka> <model>, liczba dni: <dni>, koszt: <koszt> zł”, a w przypadku rabatu na końcu dopisuje „ (rabat 10%)”; pola <> pochodzą z bazy lub z formularza

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

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, kwerendy.txt, przeglądarka.txt, styl.css, index.php, regulamin.html, rower.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.