Zadanie egzaminacyjne
Wykonaj aplikację internetową portalu ogłoszeniowego. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię.Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy.zip zabezpieczone hasłem: Zad4ni3
Archiwum należy rozpakować.
Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Po skończonej pracy wyniki zapisz także w tym folderze.
Operacje na bazie danych
Baza danych jest zgodna ze strukturą przedstawioną na obrazie 1. Tabela ogloszenie ma klucz obcy uzytkownik_id będący w relacji z kluczem głównym tabeli uzytkownik. Pole kategoria przyjmuje wartości liczbowe: 1 – książki, 2 – muzyka.Obraz 1. Baza danych |
- Utwórz nową bazę danych o nazwie ogloszenia
kod pliku baza.sql
- Do bazy ogloszenia zaimportuj tabele z pliku baza.sql z wcześniej rozpakowanego archiwum
- Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL, w formacie JPEG i nazwij dane.jpg. Nie kadruj zrzutu. Powinien on obejmować cały ekran, 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 ogloszenia. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPEG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań.
- Zapytanie 1: wstawiające do tabeli uzytkownik jeden rekord. Klucz główny nadany automatycznie
przez bazę danych, pola wypełnione danymi: Jolanta Jasny, telefon: 600600600, email:
jolanta@poczta.pl
- Zapytanie 2: wybierające jedynie tytuł, treść i podkategorię ogłoszenia, które należy do użytkownika o id równym 1 oraz którego kategoria jest równa 1
- Zapytanie 3: tworzące użytkownika jolanta na localhost z hasłem jol1@
- Zapytanie 4: nadające prawa dla użytkownika jolanta do przeglądania danych i ich zmieniania dla
tabeli uzytkownik
Witryna internetowa
Obraz 2. Witryna internetowa |
obraz pliku książki.jpg |
Cechy witryny
- Nazwa pliku: rejestracja.html
- Zastosowany właściwy standard kodowania polskich znaków
- Tytuł strony widoczny na karcie przeglądarki: „Dodaj Użytkownika”
- Arkusz stylów w pliku o nazwie styl4.css prawidłowo połączony z kodem strony
Podział strony na bloki: baner, panele lewy i prawy, stopka zrealizowany za pomocą znaczników sekcji, tak aby po uruchomieniu strony w przeglądarce wygląd był zgodny z obrazem 2
- Zawartość banera: nagłówek drugiego stopnia o treści: „Rejestracja użytkownika”
- Zawartość panelu lewego:
- Nagłówek trzeciego stopnia o treści: „Wpisz swoje dane”
- Formularz zgodny z obrazem 2, z polami:
- Imię
- Nazwisko, rozmiar pola: 40
- Telefon
- Email, rozmiar pola: 40
- Przycisk „CZYŚĆ”, po jego wciśnięciu formularz jest czyszczony
- Przycisk „WYŚLIJ”, po jego wciśnięciu dane formularza przesyłane są do skryptu metodą POST
- Zawartość panelu prawego:
- Obraz ksiazki.jpg z tekstem alternatywnym o treści: „sprzedaj książkę”
- Odsyłacz (link) o treści: „kwerendy SQL”, jego kliknięcie powoduje pobranie lub wyświetlenie
pliku kwerendy.txt
- Nagłówek trzeciego stopnia o treści: „Kategorie”
- Lista punktowana (nienumerowana) z trzema elementami: Książki, Muzyka, Filmy
- Nagłówek trzeciego stopnia o treści: „Podkategorie”
- Lista punktowana z trzema elementami: Biografia, Kryminał, Komiks
- Zawartość stopki: napis o treści: „Portal ogłoszeniowy opracował:”, dalej wstawiony Twój numer PESEL.
Styl CSS witryny internetowej
Plik styl4.css zawiera formatowanie:
- Banera: kolor tła #301B5E, biały kolor czcionki, krój czcionki: Arial, wysokość 60 px, marginesy
wewnętrzne 20 px
- Panelu lewego: kolor tła #0193DA, szerokość 60%, wysokość 700 px
- Panelu prawego: kolor tła #2DAFEE, szerokość 40%, wysokość 700 px, wyrównanie tekstu do środka
- Stopki: kolor tła #301B5E, biały kolor czcionki, wyrównanie tekstu do środka
- Obrazu: marginesy wewnętrzne 20 px, obramowanie na 1 px, linią kropkowaną, pomarańczową
- Odsyłacza: odsyłacz niewybrany ma biały kolor czcionki, odsyłacz w momencie, gdy znajduje się nad nim kursor zmienia kolor czcionki na czerwony
- Przycisków typu submit i reset: pomarańczowy kolor tła, biały kolor czcionki, bez obramowania,
marginesy wewnętrzne 20 px
Niewymienione właściwości selektorów przybierają wartości domyślne.
Skrypt połączenia z bazą
W tabeli 2 podano wybór funkcji PHP do obsługi bazy danych. Wymagania dotyczące skryptu:
- Znajduje się w pliku o nazwie dodajDane.php, jest połączony z formularzem z pliku rejestracja
- Napisany w języku PHP
- Nie jest wymagane sprawdzenie, czy operacja na bazie danych powiodła się
- Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie ogloszenia
- Skrypt pobiera dane z formularza
- Skrypt wysyła do bazy danych zapytanie wstawiające rekord w tabeli uzytkownik z danymi pobranymi z formularza (zapytanie można wykonać na bazie projektu kwerendy 1, patrz punkt „Operacje na bazie danych”)
- Na końcu działania skrypt zamyka połączenie z serwerem.
Tabela 2. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB
UWAGA: po zakończeniu pracy nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: dane.jpg, dodajDane.php, ksiazki.jpg, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, rejestracja.html, styl4.css, ewentualnie inne przygotowane pliki.
Utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Zapisz go na płycie jako przegladarka.txt.
Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowisku.
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ą.