Arkusz E.14-04-17.01

Zadanie egzaminacyjne

Wykonaj aplikację internetową realizującą formularz rejestracyjny do forum hobbystycznego. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię lub edytora WYSIWYG.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie baza2.zip zabezpieczone hasłem: Forum#1
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, a w polu plec przechowywana jest wartość "K” lub "M” w zależności od płci użytkownika.
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 Forum
 – do bazy Forum zaimportuj tabele z pliku forum.sql z wcześniej rozpakowanego archiwum


 Zawartość pliku forum.sql
 – wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z Twoim numerem PESEL w formacie JPEG i nazwij bazaForum Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import bazy
 – stwórz następujące zapytania SQL do bazy Forum i sprawdź poprawność ich działania:
   – zapytanie 1: wstawiające do tabeli Uzytkownicy rekord z danymi: nick: Anna; zainteresowania: muzyka; zawod: informatyk; plec: K
   – zapytanie 2: wstawiające do tabeli Konta rekord z danymi: login: AKowalska; hasło: qazwsx
   – zapytanie 3: wybierające jedynie login i haslo ze wszystkich rekordów tabeli Konta
   – zapytanie 4: wybierające jedynie pole zainteresowania z tabeli Uzytkownicy, dla którego poleid 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 forum.html oraz rejestracja.php

Przygotowanie pliku pomocniczego:
 – utwórz plik tekstowy o nazwie polityka.txt i umieść go w folderze z Twoim numerem PESEL. Wewnątrz pliku zapisz tekst „Polityka Bezpieczeństwa forum hobbystycznego”
Cechy witryny:
 – dwa pliki: forum.html oraz rejestracja.php
 – cechy wspólne dla obu stron witryny:
   – zastosowany standard kodowania polskich znaków
   – tytuł strony widoczny na karcie przeglądarki: „Nasze hobby”
   – arkusz stylów w pliku o nazwie hobby.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: „FORUM HOBBYSTYCZNE”
    – zawartość panelu prawego:
      – nagłówek trzeciego stopnia o treści: „TEMATYKA FORUM”
      – zagnieżdżona lista nienumerowana, zgodna z rysunkiem 2, z elementami: Hodowla zwierząt Z podlistą o dwóch punktach: psy, koty; kolejne elementy listy głównej: Muzyka, Gry komputerowe
 – cechy panelu lewego tylko dla pliku forum.html:
   – nagłówek trzeciego stopnia o treści: „FORMULARZ REJESTRACJI DO FORUM”
   – formularz powiązany z plikiem rejestracja.php metodą post
   – wygląd formularza jest zgodny z rysunkiem 2, zawiera on pola:
     – pogrubiony tekst paragrafu (akapitu) o treści „Twoje dane”
     – pola tekstowe poprzedzone etykietami: „Nick:”, „Hobby:”, „Zawód:”
     – zestaw dwóch pól opcji (radio) Kobieta oraz Mężczyzna, bez możliwości zaznaczenia obu opcji jednocześnie
     – 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 „Zapoznałem się z Polityką bezpieczeństwa”
     – fraza „Polityką bezpieczeństwa” jest odnośnikiem i prowadzi do pliku polityka.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 lewego tylko dla pliku rejestracja.php
   – efekt działania skryptu PHP

Styl CSS witryny internetowej

Plik hobby.css zawiera formatowanie dla:
 – banera: kolor tła #9A6000, biały kolor czcionki, rozmiar czcionki 180%, wyrównanie tekstu do środka, marginesy wewnętrzne 20 px
 – panelu lewego: szerokość 60%
 – panelu prawego: kolor tła #C47A00, biały kolor czcionki, szerokość 40%, wysokość panelu zajmuje całe okno przeglądarki i dostosowuje się do wysokości okna przeglądarki
 – znacznika h3: wyrównanie tekstu do środka
 – znacznika listy nienumerowanej: margines zewnętrzny 10 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 <nick> zostało zarejestrowane na forum hobbystycznym”, gdzie <nick> jest pobierane z formularza, patrz rysunek 2
 – łączy się z serwerem bazy danych na localhost, użytkownik root bez hasła, baza danych o nazwie Forum 
 – wysyła do bazy zapytanie wstawiające do tabeli Uzytkownicy rekord danych pobranych z formularza: nick, zainteresowania, zawód oraz płeć
  – 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: bazalForum.jpg, forum.html, hobby.css, kwerendy.txt, polityka.txt, rejestracja.php 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ą.