Zadanie 11
Zaprojektuj zapytania SQL do bazy szkola, wykonaj zrzuty
ekranu przedstawiające efekty działania zapytań, przygotuj grafiki
przeznaczone do umieszczenia na stronie internetowej oraz witrynę
internetową. Wykorzystaj środowisko XAMPP, edytor zaznaczający składnię
HTML oraz edytor grafiki rastrowej.
Wyniki swojej pracy zapisz w folderze. Jako nazwy folderu użyj
swojego nazwiska. Folder umieść na pulpicie. Wewnątrz folderu
utwórz dwa podfoldery o nazwach: baza oraz www.
Baza danych
Ściągnij plik o nazwie zad1.zip.
Jego zawartość to plik szkola.sql zawierający przygotowane do importu
tabele bazy danych szkola.
Baza danych szkola składa się z trzech tabel: uczen, klasa, wychowawca.
Wszystkie tabele posiadają klucz podstawowy o nazwie id. Opis tabel
jest następujący:
1. Tabela uczen
a. przechowuje: informacje
o wybranych uczniach klas 1a, 1b, 2a i 2b szkoły ponadgimnazjalnej,
b. pola: imie i nazwisko typu tekstowego oraz id i id_klasy typu
liczbowego,
c. pole id_klasy jest kluczem obcym powiązanym z kluczem podstawowym
tabeli klasa.
2. Tabela wychowawca
a. przechowuje: informacje
o wychowawcach klas 1a, 1b, 2a i 2b,
b. pola: imie i nazwisko typu tekstowego oraz id i id_klasy typu
liczbowego,
c. pole id_klasy jest kluczem obcym powiązanym z kluczem podstawowym
tabeli klasa.
3. Tabela klasa
a. przechowuje: informacje
o klasach 1a, 1b, 2a i 2b,
b. pola: nazwa typu tekstowego oraz id typu liczbowego.
Zapytania do bazy
Za pomocą narzędzia XAMPP Control Panel uruchom usługi Apache
oraz MySQL, przejdź do narzędzia phpMyAdmin. Wykonaj następujące
czynności:
- Utwórz bazę danych o nazwie szkola,
- Do bazy szkola zaimportuj tabele z pliku szkola.sql z
wcześniej rozpakowanego archiwum,
- W podfolderze baza utwórz plik
zapytania.txt,
- Zapisz i wykonaj zapytania SQL działające na bazie szkola.
Zapytania zapisz w pliku kwerendy.txt, w podfolderze baza. Wykonaj
zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz
w formacie PNG, w podfolderze baza jako: kwerenda1.png,
kwerenda2.png,
nowy_uzytkownik.png i uprawnienia.png. Zrzuty powinny obejmować cały
ekran monitora z widocznym paskiem zadań.
- Zapytanie 1: zapisujące w tabeli uczen rekord danych:
id=27, imie=Wiktoria, nazwisko=Jasny, id_klasy=1,
- Zapytanie 2: wybierające jedynie imię i nazwisko
wychowawcy klasy, do której uczęszcza uczeń o nazwisku
Markiewicz
- Zapytanie 3: tworzące użytkownika Jan_Bogucki na
localhost z hasłem jb_123
- Zapytanie 4: nadające prawa dla użytkownika Jan_Bogucki
do wybierania, dodawania i usuwania danych dla tabeli uczen,
5. Wyeksportuj bazę danych do pliku o nazwie
szkola_nowa.sql, plik eksportu umieść w podfolderze baza.
Witryna internetowa
Stwórz prostą witrynę składającą się z jednej
strony internetowej o nazwie index.html. Plik zapisz w
podfolderze www (który znajduje się w folderze nazwanym
Twoim nazwiskiem). Wygląd witryny jest zgodny z Obrazem 1.
Przygotowanie grafik:
- Wykorzystując zrzuty ekranowe kwerend przygotuj grafiki dla
witryny internetowej:
zrzuty ekranowe wykadruj tak, aby były widoczne tylko efekty działania
zapytań, nie powinny być widoczne inne elementy okna przeglądarki oraz
panelu phpMyAdmin,
- przeskaluj obrazy tak, aby ich szerokość wynosiła 400 px, a
wysokość 200 px,
- obrazy zapisz w formacie JPG, w podfolderze www, jako
kwerenda1.jpg, kwerenda2.jpg, nowy_uzytkownik.jpg i uprawnienia.jpg
UWAGA: pliki z podfolderu baza pozostaw niezmienione, nie
nadpisuj ich.
Cechy witryny:
- zastosowano właściwy standard kodowania polskich
znaków,
- tytuł strony: „Szkoła ponadgimnazjalna”,
- strona podzielona za pomocą znaczników sekcji na
baner, panele lewy, prawy i środkowy oraz stopkę, tak aby po
uruchomieniu strony w przeglądarce wygląd był zgodny z obrazem 1,
- zawartość banera: nagłówek drugiego stopnia o
treści: „Projekt strony internetowej
szkoły ponadgimnazjalnej”,
- zawartość panelu lewego:
- nagłówek trzeciego stopnia o treści:
„Do pobrania”,
- poniżej w postaci listy punktowanej dwa odnośniki:
- „zapytania SQL”,
- „baza danych”,
- kliknięcie odnośnika o treści: „zapytania
SQL”, powoduje pobranie/wyświetlenie
pliku zapytania.txt z podfolderu baza,
- kliknięcie odnośnika o treści: „baza
danych”, powoduje pobranie/wyświetlenie
pliku szkola_nowa.sql z podfolderu baza,
- zawartość panelu środkowego:
- tabela o rozmiarach: 5 wierszy, 2 kolumny,
- szerokość prawej kolumny tabeli: 405 px,
- komórki pierwszego wiersza zawierają kolejno
wpisy: „Treść zapytania” i „Zrzut
ekranu”,
- w komórkach tabeli w kolejnych wierszach:
treści zapytań zawartych w pliku zapytania.txt i obok –
odpowiadające im zrzuty ekranu w formacie JPG, zgodnie z Obrazem 1,
- obrazy powinny posiadać tekst alternatywny zawierający
nazwę pliku,
- zawartość panelu prawego:
- nagłówek czwartego stopnia o treści:
„Obliczanie średniej ocen”,
- poniżej lista punktowana z nazwiskami: Polak, Nowak,
Rysik, obok każdego nazwiska pole tekstowe przeznaczone na wpisanie
średniej ocen ucznia,
- poniżej przycisk z etykietą „oblicz”,
- poniżej napis w nagłówku czwartego stopnia
„Średnia ocen:”,
- zawartość stopki: nagłówek piątego stopnia o
treści: „autor strony:
………….”, w miejsce
kropek wpisane Twoje nazwisko.
Styl CSS witryny internetowej
Styl elementów witryny zdefiniuj przy pomocy języka
CSS, w osobnym pliku o nazwie styl.css, plik ten zapisz w podfolderze
www oraz prawidłowo dołącz do pliku z kodem strony.
Wymagania odnośnie stylu CSS:
- kolor czcionki odnośników: brązowy,
- kolor tła banera, stopki, panelu prawego i panelu lewego:
#ffb31c,
- kolor tła panelu środkowego: #ffcb71,
- wyrównanie tekstu banera i stopki: do środka,
- wyrównanie tekstu panelu prawego: do prawej,
- krój czcionki dla całej strony: Verdana,
- szerokość panelu lewego i prawego: 20%,
- szerokość panelu środkowego: 60%,
- wysokość paneli lewego, prawego i środkowego: 480 px,
- wysokość banera: 60 px,
- wysokość stopki: 30 px,
- punktor listy w panelu lewym i prawym: kwadrat,
- komórki tabeli obramowane ramką czarną ciągłą
szerokości 1 px,
- włączone paski przewijania dla panelu środkowego.
Skrypt obliczający średnią ocen
- wykonywany po stronie klienta,
- powinien wykonywać działania na liczbach rzeczywistych,
- po kliknięciu przycisku „oblicz” skrypt
pobiera dane z trzech pól tekstowych,
- jeżeli przynajmniej jedno z pól jest puste lub
do któregoś pola wpisano ciąg znaków,
który nie jest poprawną liczbą rzeczywistą skrypt powinien
wyświetlić w osobnym oknie komunikat „wpisz poprawne
dane”,
- w przeciwnym przypadku skrypt powinien przekonwertować
ciągi znaków na liczby rzeczywiste,
- następnie skrypt powinien obliczyć średnią z trzech ocen,
- na koniec skrypt powinien wyświetlić obliczoną średnią
poniżej napisu „Średnia ocen” w prawym panelu.
W folderze z Twoim nazwiskiem powinny się znajdować
podfoldery: baza oraz www. W podfolderze baza powinny znajdować się
pliki: szkola_nowa.sql, zapytania.txt, kwerenda1.png, kwerenda2.png,
nowy_uzytkownik.png i uprawnienia.png. W podfolderze www powinny
znajdować się pliki: kwerenda1.jpg, kwerenda2.jpg, nowy_uzytkownik.jpg
i uprawnienia.jpg oraz index.html, styl.css, plik przeglądarka.txt z
nazwą przeglądarki internetowej w której weryfikowałeś
poprawność działania witryny i ewentualnie inne przygotowane pliki.
Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Ocenie będą podlegać 4 rezultaty:
- operacje na bazie danych,
- utworzona strona internetowa,
- zdefiniowany styl CSS strony internetowej,
- skrypt.
TM
2018