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 |
– 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>
Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB |
UWAGA!