E.14-03-17.01




Zadania egzaminacyjne

Wykonaj aplikację internetową wspomagającą pracę komisu samochodowego. 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. Rozpakowane pliki 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. Baza 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;
  • 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:
    a) zapytanie 1: wstawiające do tabeli Uzytkownicy rekord z danymi: imię: Jan; nazwisko: Nowak; adres: Warszawa, Kopernika 4; telefon: 608111222,
    b) zapytanie 2: wstawiające do tabeli Konta rekord z danymi: login:janNowak; hasło: qwerty,
    c) zapytanie 3: wybierające jedynie imię i nazwisko ze wszystkich rekordów tabeli Uzytkownicy,
    d) 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
Witryna internetowa przedstawiona jest na rysunku 2.

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”
    – wyniki skryptu nr 1,
    – 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%
  • panelu prawego: kolor tła #1DA956, szerokość 20%, wysokość 600 px,
  • 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.

Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB
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;
  • na końcu działania skryptu powinno zostać obsłużone zamknięcie połączenia z serwerem;
  • 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;
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.