Arkusz EE.09 : 2022 - styczeń - zad. 05 (php)

Oznaczenie: EE.09-05-22.01-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj stronę logowania do portalu społecznościowego, wykorzystując pakiet XAMPP, edytor zaznaczający składnię oraz edytor grafiki rastrowej.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum ZIP o nazwie osiedle.zip zabezpieczone hasłem: Mieszk4ncY

Pobierz osiedle.zip

Należy utworzyć folder o nazwie odpowiadającej numerowi PESEL zdającego lub w przypadku jego braku innemu numerowi, którym został podpisany arkusz. Archiwum należy rozpakować do tego folderu.

Ważne! Aby strona działała poprawnie rozpakowane pliki muszą znaleźć się w tym samym folderze, co pliki strony. Wszystkie wykonane w czasie egzaminu pliki w tym zrzuty ekranu, pliki strony, stylów należy umieścić w tym folderze.

Operacje na bazie danych

Do wykonania operacji na bazie należy wykorzystać tabele uzytkownicy i dane przedstawione na Obrazie 1. W tabeli uzytkownicy hasła są zabezpieczone szyfrem SHA-1.

Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych:

• Utwórz bazę danych o nazwie portal
• Do bazy portal zaimportuj plik baza.sql z rozpakowanego archiwum
• Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze opisanym numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz, w formacie JPEG i nazwij egzamin. 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
• Zapisz i wykonaj zapytania SQL działające na bazie danych portal. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG o nazwach kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
  • Zapytanie 1: wybierające jedynie pole haslo z tabeli uzytkownicy dla użytkownika o loginie Justyna
  • Zapytanie 2: liczące liczbę wierszy w tabeli dane
  • Zapytanie 3: wybierające jedynie pole login z tabeli uzytkownicy i odpowiadające mu pola rok_urodz, przyjaciol, hobby, zdjecie z tabeli dane dla użytkownika o loginie Justyna. Tabele połączone są relacją 1..1, za pomocą kluczy głównych
  • Zapytanie 4: dodające do tabeli dane kolumnę stanowisko dowolnego typu tekstowego

Witryna internetowa

Cechy grafiki:

• Plik o1.jpg, wypakowany z archiwum, należy przyciąć tak, aby jego wysokość wynosiła dokładnie 200 px, szerokość pozostaje niezmieniona – 400 px, obraz należy zapisać w pliku o tej samej nazwie. Pozostałe obrazy zostały przygotowane i nie należy ich zmieniać.

Cechy witryny:

• Składa się ze stron: uzytkownicy.php, dane.html
• W pliku o nazwie dane.html jest wpisany jedynie napis „strona w trakcie budowy”. Pozostałe wymagania dotyczą jedynie pliku uzytkownicy.php
• Zastosowany właściwy standard kodowania polskich znaków
• Tytuł strony widoczny na karcie przeglądarki: „Portal społecznościowy”
• Arkusz stylów w pliku o nazwie styl5.css prawidłowo połączony z kodem strony
• Podział strony na bloki: obok siebie dwa bloki banera, poniżej obok siebie blok lewy i prawy, poniżej stopka. 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
• Zawartość banera lewego: nagłówek drugiego stopnia o treści „Nasze osiedle”
• Zawartość banera prawego: efekt działania skryptu 1
• Zawartość bloku lewego:
  • Nagłówek trzeciego stopnia o treści „Logowanie”
  • Formularz wysyłający dane do tego samego pliku metodą post z elementami:
    • Napis login, poniżej pole edycyjne
    • Poniżej napis hasło, poniżej pole edycyjne pozwalające na niejawne wpisanie hasła
    • Poniżej przycisk o treści „Zaloguj” wysyłający dane z formularza
• Zawartość bloku prawego:
  • Nagłówek trzeciego stopnia o treści „Wizytówka”
  • Blok wizytówki, w którym umieszczony jest efekt działania skryptu 2
• Zawartość stopki: napis o treści „Stronę wykonał: ”, dalej wstawiony numer PESEL zdającego lub w przypadku jego braku inny numer, którym został podpisany arkusz

Styl CSS witryny internetowej

Cechy formatowania CSS:

• Są zawarte wyłącznie w zewnętrznym arkuszu stylów
• Domyślne dla całej strony: krój czcionki Tahoma
• Wspólne dla obu banerów: kolor tła #003d33, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 50 px
• Dodatkowo dla banera lewego: szerokość 70%
• Dodatkowo dla banera prawego: szerokość 30%
• Dla bloku lewego: kolor tła #26a69a, wysokość 550 px, szerokość 30%
• Dla bloku prawego: kolor tła #26a69a, wysokość 550 px, szerokość 70%
• Dla bloku stopki: kolor tła #003d33, biały kolor czcionki
• Dla bloku wizytówki: szerokość 400 px, marginesy zewnętrzne 30 px, wyrównanie tekstu do środka, obramowanie linią ciągłą 1 px koloru #003d33
• Dla przycisku w wizytówce: kolor tła #003d33, biały kolor czcionki, szerokość 100%, wysokość 30 px, bez obramowania
• Po najechaniu na przycisk w wizytówce jego tło zamienia się na #004c40

Skrypt

W Tabeli 1 podano dane przydatne podczas testowania aplikacji. W Tabeli 2 podano wybór funkcji PHP do obsługi bazy danych oraz opis funkcji sha1. Wymagania dotyczące skryptu:

• Napisany w języku PHP
• Skrypt łączy się z serwerem bazy danych na localhost, użytkownik root bez hasła, baza danych o nazwie portal
• Po wykonaniu operacji na bazie danych skrypt zamyka połączenie z serwerem
• Działanie skryptu 1
  • Wysyła do bazy danych zapytanie 2
  • Wartość zwróconą zapytaniem wypisuje w nagłówku piątego stopnia, według wzoru: „Liczba użytkowników portalu: <zwrocona_wartosc>”
• Działanie skryptu 2
  • Skrypt wykonuje akcje tylko wtedy, jeśli dane wysłane z formularza są niepuste
  • Skrypt wysyła do bazy zmodyfikowane zapytanie 1, tak, że w klauzuli warunku jest sprawdzony login przesłany przez formularz
  • Jeżeli login nie istnieje w bazie, wyświetlony jest komunikat „login nie istnieje”
  • Jeżeli login istnieje jest sprawdzana zgodność przesłanego formularzem hasła z hasłem przechowywanym w bazie. Należy zastosować funkcję szyfrującą dane algorytmem SHA-1
  • Jeżeli hasła nie zgadzają się, wyświetlony jest komunikat „hasło nieprawidłowe”
  • Jeżeli hasła się zgadzają to skrypt wysyła do bazy zmodyfikowane zapytanie 3 tak, że w klauzuli warunku podany jest login przesłany formularzem. Następnie wyświetla dane w bloku wizytówki:
    • Obraz na podstawie nazwy pliku z tekstem alternatywnym „osoba”
    • Poniżej w nagłówku czwartego stopnia login oraz w nawiasie wiek danej osoby obliczony na podstawie roku urodzenia (pole rok_urodz)
    • Poniżej w paragrafie hobby, poprzedzone napisem „hobby: ”
    • Poniżej w nagłówku pierwszego stopnia obraz serca wypakowany z archiwum (icon-on.png) oraz liczbę przyjaciół pobraną z bazy (pole przyjaciol)
    • Poniżej przycisk o treści „Więcej informacji” prowadzący do pliku dane.html

UWAGA!

Po zakończeniu pracy utwórz w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowano poprawność działania witryny.

Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz powinny się znajdować pliki: dane.html, egzamin.jpg, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, o1.jpg – o8.jpg, przeglądarka.txt, styl5.css, uzytkownicy.php, ewentualnie inne przygotowane pliki.

Po nagraniu płyty sprawdź poprawność nagrania w obecności przewodniczącego zespołu nadzorującego, na specjalnie przygotowanym do tego celu stanowisku. Opisz płytę swoim numerem PESEL lub w przypadku jego braku innym numerem, którym został podpisany arkusz i pozostaw na stanowisku, zapakowaną w pudełku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:

• operacje na bazie danych
• zawartość witryny internetowej
• działanie witryny internetowej
• styl CSS witryny internetowej
• skrypt.