baner tytulowy

Zadanie 4

Wykonaj projekt zapytań SQL dla bazy „Meteo" oraz witrynę internetową. Wykorzystaj środowisko XAMPP, edytor zaznaczający składnię HTML oraz edytor grafiki rastrowej.

Jeżeli masz zainstalowany program XAMPP przejdź do Control Panel i uruchom usługi MySQL i Apache, przejdź do narzędzia phpMyAdmin. Ćwiczenie wykonaj wykorzystując program XAMPP, możesz również skorzystać z darmowego serwera z obsługą PHP i mySQL np. 5v.pl lub 7m.pl. 

Wyniki swojej pracy zapisz w folderze. Jako nazwę folderu użyj swojego numeru PESEL. Folder umieść na pulpicie konta Administrator. Wewnątrz folderu utwórz dwa podfoldery o nazwach: baza oraz www.

Pobierz plik „zad5.zip". Archiwum jest zabezpieczone hasłem „3gz_20!6”. Jego zawartością są dane eksportu bazy danych „Meteo". Baza danych „Meteo" składa się z trzech tabel: Lokalizacja. Prognoza, Pogoda. Wszystkie tabele posiadają klucz podstawowy o nazwie id. Opis tabel jest następujący:

  1. Tabela Lokalizacja
    1. przechowuje: miejsce pobrania danych pogodowych.
    2. pola: Nazwa i Adres typu tekstowego.
  2. Tabela Pogoda
    1. przechowuje: dane pogodowe.
    2. pola: Temperatura. Opad, Ciśnienie. PredkoscWiatru, Wilgotność typu liczbowego.
  3. Tabela Prognoza
    1. przechowuje: asocjacje pogody i lokalizacji.
    2. pola: dataProg typu DATE, godzina typu TIME.
  4. klucze obce: Lokalizacjaid powiązany z kluczem tabeli Lokalizacja, Pogoda id powiązany z kluczem tabeli Pogoda.

Zapytania do bazy

Wybierz narzędzie phpMyAdmin. Wykonaj następujące czynności:

  1. Stwórz bazę danych o nazwie meteo (gdy korzystasz ze zdalnego serwera wykorzystaj bazę utworzoną do konta).
  2. Zaimportuj do niej rozpakowany plik meteo.sął.
  3. W folderze baza stwórz plik kwerendy.txt.
  4. Utwórz następujące zapytania SQL, zapisz je w pliku kwerendy.txt:
    1. kwerenda   zapisująca   w   tabeli   Lokalizacja   rekord   danych:   id=3, nazwa=KATl. adres=Katowice, Korfantego 105,
    2. kwerenda wybierająca id rekordów z tabeli Pogoda, dla których temperatura jest większa niż 20 stopni,
    3. kwerenda wybierająca id lokalizacji oraz datę prognozy, dla których wilgotność powietrza jest w iększa od 50 procent.
    4. kwerenda wybierająca nazwy lokalizacji oraz id pogody, dla których data prognozy to drugi lipca 2015 roku. 
  5. Zapytania SQL wykonaj na bazie danych meteo, a ich wyniki udokumentuj jako zrzuty ekranowe. Zrzuty zapisz w formacie PNG. w folderze baza jako: kw1.png, kw2.png, kw3.png oraz kw4.png.
  6. Wyeksportuj bazę danych jako meleo.stjl, plik eksportu umieść w folderze baza

Grafiki dla witryny internetowej

Wykorzystując zrzuty ekranowe kwerend przygotuj grafiki dla witryny internetowej. W tym celu:

  1. zrzuty ekranowe skadruj tak, aby było widoczne tylko okno phpMyAdmin. Ikony i menu przeglądarki internetowej powinny nie być w idoczne.
  2. przeskaluj obrazy z zachowaniem proporcji tak, aby ich szerokość nic przekraczała 400 px, a wysokość nie przekraczała 200 px.
  3. obrazy zapisz w formacie JPG, w folderze www, jako kw 1 jpg, kw2.jpg, kw3.jpg, kw4.jpg.

UWAGA: pliki z folderu buza pozostaw niezmienione, nie nadpisuj ich.

Witryna internetowa

Stwórz prosta witrynę składającą się z jednej strony internetowej o nazwie index.html. Plik zapisz w folderze www. Witryna ma być zgodna z następującym rysunkiem:

Wzór witryny

Styl elementów witryny zdefiniuj przy pomocy języka CSS. Wymagania odnośnie stylu GSS:

  1. kolor czcionki odnośników: żółty.
  2. kolor RGB tła banera, stopki i panelu prawego: #4A7684,
  3. kolor czcionki banera, stopki i panelu prawego: biały,
  4. wyrównanie tekstu banera, panelu lew ego i stopki: do środka,
  5. krój czcionki banera i stopki: Arial.
  6. marginesy wewnętrzne bannera i stopki: 20 px,
  7. szerokość panelu lewego: 65%,
  8. szerokość panelu prawego: 35%,
  9. wysokość paneli lewego i prawego: 500 px.

Wymagania odnośnie witryny:

  1. Obsługa polskich liter.
  2. Tytuł strony: Stacja Metco
  3. Strona podzielona za pomocą znaczników <div> na baner, panele lewy i prawy oraz stopkę, zgodnie z rysunkiem z poprzedniej strony.
  4. Zawartość banera: nagłówek pierwszego stopnia o treści: „STACJA METEO”
  5. Zawartość panelu lewego:
  6. nagłówek drugiego stopnia o treści: „Dokumentacja wyników zapytań w bazie Metco0148”.
  7. tabela 2x2, w komórkach kolejno obrazy kwl.jpg, kw2.jpg. kw3.jpg, kw4.jpg zgodnie z rysunkiem z poprzedniej strony.
  8. obrazy powinny posiadać ramkę o szerokości 1 px.
  9. obrazy powinny posiadać tekst alternatywny. Dla kwl.jpg tekst „kwerenda 1", kw2.jpg - ,.kwerenda2", kw3.jpg   „kwcrcnda3", kw4.jpg - „kwerenda4"\
  10. Zawartość panelu prawego:
  11. nagłówek drugiego stopnia o treści: „Zamiana jednostek temperatury",
  12. pole tekstowe i dwa przyciski. Opis pola tekstowego: „temperatura w "C:" (oznaczenie stopnia to litera „o" w indeksie górnym), opis pierwszego przycisku: „Kelwiny”, opis drugiego przycisku: „Fahrenheity”,
  13. nagłówek drugiego stopnia o treści: „Do pobrania”,
  14. odnośnik o treści: „Kwerendy”, prowadzi do pliku kwerendy.txt w folderze baza.
  15. odnośnik o treści: „Eksport MySQL” prowadzi do pliku meteo.sql w folderze baza,
  16. Zawartość stopki: tekst paragrafu o treści: AUTOR STRONY: a następnie wypisany swoje dane.

Wymagania odnośnie działania skryptu zamiany jednostek:

  1. Skrypt powinien być wykonywany po stronie klienta.
  2. Skrypt powinien operować na liczbach rzeczywistych.
  3. Po wybraniu przycisku „Kelwiny" lub „Fahrenheity" skrypt:
    1. sprawdza w polu tekstowym, czy wprowadzono dane i czy dane są liczbą jeśli nie, wyświetla w okienku komunikat o treści „Błąd danych".
    2. łiczy temperaturę w stopniach Kelwina lub Fahrenheita (patrz wzory poniżej),
    3. wyświetla na stronie, pod przyciskami wynik z odpowiednią jednostką, np. 35K.
Sposób obliczenia temperatury w Kelwinach:   
 K  =  °C + 273,15
Sposób obliczenia temperatury w Fahrenheitach:      °F = (°C • 1,8) + 32

Informacje dodatkowe

Skrypty działające po stronie klienta to skrypty javascript. Przykładowy skrypt znajdziesz w kodzie strony rozwiązania. Jest to jesden ze spsobów, bardzo oszczędny i elegancki jednak mozna napisać również inne poprawnie działające skrypty robiące dokładnie to samo.  

Przykładowe rozwiązanie (linki kwerendy i Export MySql nie są aktywne.)


    TM 2018