Arkusz E.14-03-17.01

Zadanie egzaminacyjne

Wykonaj aplikację internetową realizującą formularz rejestracyjny dla sklepu internetowego. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię lub edytora WYSITWYG.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie baza.zip zabezpieczone hasłem: formul4rz!
Plik należy rozpakować.
Wyniki swojej pracy zapisz w folderze stworzonym na pulpicie konta Egzamin. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowany plik umieść w tym folderze.

Operacje na bazie danych

Baza danych zgodna jest ze strukturą przedstawioną na rysunku 1. Tabele są ze sobą połączone za pomocą kluczy głównych relacją 1 do 1. Należy założyć, że hasła są przechowywane w sposób nieszyfrowany.
Rysunek 1. Struktura bazy danych


Wybierz program XAMPP Control Panel i uruchom usługi MySQL i Apache, przejdź do narzędzia phpMyAdmin. Następnie wykonaj operacje na bazie danych:
 – utwórz nową bazę danych o nazwie Sklep
 – do bazy Sklep zaimportuj tabele z pliku baza.sql z wcześniej rozpakowanego archiwum

 Zawartość pliku baza.sql
 – wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z Twoim numerem PESEL w formacie PNG i nazwij bazaSklep.png Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import bazy
 – stwórz następujące zapytania SQL do bazy Sklep i sprawdź poprawność ich działania:
   – zapytanie 1: wstawiające do tabeli Uzytkownicy rekord z danymi: imię: Jan; nazwisko: Nowak; adres: Warszawa, Kopernika 4; telefon: 608111222
   – zapytanie 2: wstawiające do tabeli Konta rekord z danymi: login:janNowak; hasło: qwerty
   – zapytanie 3: wybierające jedynie imię i nazwisko ze wszystkich rekordów tabeli Uzytkownicy
   – zapytanie 4: wybierające jedynie adres z tabeli Uzytkownicy, dla którego pole id jest równe 1
 – poprawnie działające zapytania zapisz w folderze z Twoim numerem PESEL, w pliku kwerendy.txt. Zapytania ponumeruj, stosując format zapisu: „zapytanie 1: ... treść zapytania...”

Witryna internetowa


Rysunek 2. Witryna internetowa, strony sklep.html oraz formularz.php
Przygotowanie pliku pomocniczego:
 – utwórz plik tekstowy o nazwie regulamin.txt i umieść go w folderze z Twoim numerem PESEL. Wewnątrz pliku zapisz tekst „Regulamin sklepu muzycznego”
Cechy witryny:
 – dwa pliki: sklep.html oraz formularz.php
 – cechy wspólne dla obu stron witryny:
   – zastosowany standard kodowania polskich znaków
   – tytuł strony, widoczny na karcie przeglądarki: „Sklep muzyczny”
   – arkusz stylów w pliku o nazwie muzyka.css prawidłowo połączony z kodem strony
   – podział strony na bloki: baner, panel lewy, panel prawy zrealizowany za pomocą znaczników sekcji zgodnie z rysunkiem 2
   – zawartość banera: nagłówek pierwszego stopnia o treści: „SKLEP MUZYCZNY”
   – zawartość panelu lewego:
     – nagłówek drugiego stopnia o treści: „NASZA OFERTA”
     – lista numerowana z elementami: Instrumenty muzyczne, Sprzęt audio, Płyty CD
 – cechy panelu prawego tylko dla pliku sklep.html;
   – nagłówek drugiego stopnia o treści: „FORMULARZ REJESTRACYJNY”
   – formularz powiązany z plikiem formularz.php metodą post
   – wygląd formularza jest zgodny z rysunkiem 2, zawiera on pola:
     – pogrubiony tekst paragrafu (akapitu) o treści „Dane osobowe”
     – pola tekstowe poprzedzone etykietami: „Imię:”, „Nazwisko:”, „Adres:”, „Telefon:”.
     – linia horyzontalna
     – pogrubiony tekst paragrafu o treści „Dane logowania”
     – pole tekstowe poprzedzone etykietą „Login:”
     – pole typu hasło poprzedzone etykietą „Hasło:”. W czasie wpisywania tekstu przeglądarka wyświetla znaki kropki
     – pole typu checkbox domyślnie zaznaczone oraz tekst „Akceptuję regulamin sklepu”
     – słowo „regulamin” jest odnośnikiem i prowadzi do pliku regulamin.txt. Odnośnik otwiera się w osobnym oknie przeglądarki
     – dwa przyciski: do czyszczenia formularza z treścią „WYCZYŚĆ” oraz wysłania formularza z treścią „REJESTRUJ”
 –  cechy panelu prawego tylko dla pliku formularz.php
   – efekt działania skryptu PHP

Styl CSS witryny internetowej

Plik muzyka.css zawiera formatowanie dla:
 – banera: kolor tła #812F8D, biały kolor czcionki, rozmiar czcionki 200%, wyrównanie do środka, marginesy wewnętrzne 10 px
 – panelu lewego: kolor tła #BB74C4, biały kolor czcionki, szerokość 25%, wysokość panelu zajmuje całe okno przeglądarki i dostosowuje się do wysokości okna przeglądarki
 – panelu prawego: szerokość 75%
 – znacznika h2: wyrównanie tekstu do środka
 – znacznika formularza: margines zewnętrzny 20 px
Niewymienione właściwości obiektów przybierają wartości domyślne.

Skrypt połączenia z bazą

W tabeli 1 podano wybór funkcji PHP do obsługi bazy danych. Skrypt napisany w języku PHP oraz uruchamiany za pomocą przycisku REJESTRUJ formularza, wykonuje następujące czynności:
 – pobiera dane formularza za pomocą metody POST
 – wyświetla w panelu prawym tekst o treści „Konto <imie> <nazwisko> zostało zarejestrowane w sklepie muzycznym”, gdzie pola zapisane w nawiasach <> są pobierane z formularza, patrz rysunek 2
 – łączy się z serwerem bazy danych na localhost, użytkownikroot bez hasła, baza danych o nazwie Sklep
 – wysyła do bazy zapytanie wstawiające do tabeli Uzytkownicy rekord danych pobranych z formularza: imię, nazwisko, adres oraz telefon
 – wysyła do bazy zapytanie wstawiające do tabeli Konta rekord danych pobranych z formularza: login oraz hasło
 – zamyka połączenie z serwerem bazy
UWAGA!
Dla uproszczenia zadania nie jest wymagana kontrola kluczy głównych tak, aby spełniona była relacja łącząca wstawiane rekordy.
Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB

UWAGA!
Po zakończeniu pracy zgłoś przewodniczącemu ZN gotowość do nagrania płyty z rezultatami pracy. W folderze z Twoim numerem PESEL powinny się znajdować pliki: bazaSklep.png, formularz.php, kwerendy.txt, muzyka.css, regulamin.txt, sklep.html ewentualnie inne przygotowane przez Ciebie pliki. Po nagraniu płyty CD/DVD sprawdź liczbę oraz poprawność działania zapisanych plików.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będą podlegać 4 rezultaty:
 – operacje na bazie danych,
 – witryna internetowa,
 – styl CSS witryny internetowej,
 – skrypt połączenia z bazą.