E.14: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami.

EGZAMIN PRAKTYCZNY E.14-05-16.01

STYCZEŃ 2016 ZADANIE 5

Wykonaj projekt zapytań SQL dla bazy „Meteo” oraz witrynę internetową. Wykorzystaj środowisko XAMPP, edytor zaznaczający składnię HTML oraz edytor grafiki rastrowej.
Na stanowisku egzaminacyjnym znajduje się komputer z zainstalowanym systemem operacyjnym i oprogramowaniem a także dokumentacja w postaci spisu zainstalowanego oprogramowania. Zaloguj się bez hasła na konto Administrator. 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.

Baza danych

Na pulpicie konta Administrator znajduje się archiwum ZIP o nazwie „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:
plik baza_zad5.sql z archiwum zad5.zip
-- phpMyAdmin SQL Dump
-- version 4.1.12
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 06 Lip 2015, 13:09
-- Server version: 5.6.16
-- PHP Version: 5.5.11

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `meteo`
--

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `lokalizacja`
--

CREATE TABLE IF NOT EXISTS `lokalizacja` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `Nazwa` text,
  `Adres` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Zrzut danych tabeli `lokalizacja`
--

INSERT INTO `lokalizacja` (`id`, `Nazwa`, `Adres`) VALUES
(1, 'WAW1', 'Warszawa, Koszykowa 75'),
(2, 'SZC1', 'Szczecin, Przestrzenna 10');

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `pogoda`
--

CREATE TABLE IF NOT EXISTS `pogoda` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `temperatura` int(11) DEFAULT NULL,
  `Opad` int(10) unsigned DEFAULT NULL,
  `Cisnienie` int(10) unsigned DEFAULT NULL,
  `PredkoscWiatru` int(10) unsigned DEFAULT NULL,
  `Wilgotnosc` int(10) unsigned DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

--
-- Zrzut danych tabeli `pogoda`
--

INSERT INTO `pogoda` (`id`, `temperatura`, `Opad`, `Cisnienie`, `PredkoscWiatru`, `Wilgotnosc`) VALUES
(1, 23, 0, 1017, 4, 60),
(2, 21, 0, 1004, 40, 50),
(3, 18, 0, 990, 3, 55),
(4, 23, 0, 1000, 30, 30),
(5, 19, 0, 1000, 30, 30);

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `prognoza`
--

CREATE TABLE IF NOT EXISTS `prognoza` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `Lokalizacja_id` int(10) unsigned NOT NULL,
  `Pogoda_id` int(10) unsigned NOT NULL,
  `dataProg` date DEFAULT NULL,
  `godzina` time DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

--
-- Zrzut danych tabeli `prognoza`
--

INSERT INTO `prognoza` (`id`, `Lokalizacja_id`, `Pogoda_id`, `dataProg`, `godzina`) VALUES
(1, 1, 1, '2015-07-01', '17:00:00'),
(2, 2, 2, '2015-07-01', '17:00:00'),
(3, 1, 3, '2015-07-02', '17:00:00'),
(4, 2, 4, '2015-07-02', '17:00:00'),
(5, 1, 5, '2015-07-03', '17:00:00');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


  1. Tabela Lokalizacja
    a. Przechowuje miejsce pobrania danych pogodowych
    b. Pola: Nazwa i Adres typu tekstowego
  2. Tabela Pogoda
    a. Przechowuje dane pogodowe
    b. Pola: Temperatura, Opad, Cisnienie, PredkoscWiatru, Wilgotnosc typu liczbowego
  3. Tabela Prognoza
    a. Przechowuje asocjacje pogody i lokalizacji.
    b. Pola: dataProg typu DATE, godzina typu TIME
    c. Klucze obce: Lokalizacja_id powiązany z kluczem tabeli Lokalizacja, Pogoda_id powiązany z kluczem tabeli Pogoda.

Zapytania do bazy

Za pomocą narzędzia XAMPP Control Panel uruchom usługę Apache i MySQL. Przejdź następnie do strony http://localhost i wybierz narzędzie phpMyAdmin. Wykonaj następujące czynności:
  1. Stwórz bazę danych o nazwie meteo.
  2. Zaimportuj do niej rozpakowany plik meteo.sql.
  3. W folderze baza stwórz plik kwerendy.txt.
  4. Utwórz następujące zapytania SQL, zapisz je w pliku kwerendy.txt:
    a. Kwerenda zapisująca w tabeli Lokalizacja rekord danych id=3, nazwa=KAT1, adres=Katowice, Korfantego 105,
     - INSERT INTO lokalizacja VALUES(3,"KAT1","Katowice, Korfantego 105");
     - INSERT INTO lokalizacja(id, Nazwa, Adres) VALUES(3,"KAT1","Katowice, Korfantego 105");
    b. Kwerenda wybierająca id rekordów z tabeli Pogoda, dla których temperatura jest większa od 20 stopni
     - SELECT id FROM pogoda WHERE temperatura>20;
    c. Kwerenda wybierająca id lokalizacji oraz datę prognozy, dla których wilgotność powietrza jest większa od 50 procent,
    d. SELECT lokalizacja.id, prognoza.dataProg FROM lokalizacja, prognoza, pogoda WHERE lokalizacja.id=prognoza.Lokalizacja_id AND pogoda.id=prognoza.Pogoda_id AND pogoda.wilgotnosc>50;
    e. SELECT lokalizacja.id, prognoza.dataProg FROM lokalizacja INNER JOIN prognoza ON lokalizacja.id=prognoza.Lokalizacja_id INNER JOIN pogoda ON pogoda.id=prognoza.Pogoda_id WHERE pogoda.wilgotnosc>50;
    f. Kwerenda wybierająca nazwy lokalizacji oraz id pogody, dla których data to drugi lipca 2015 roku.
     - SELECT lokalizacja.nazwa, pogoda.id FROM lokalizacja, prognoza, pogoda WHERE lokalizacja.id=prognoza.Lokalizacja_id AND pogoda.id=prognoza.Pogoda_id AND prognoza.dataProg="2015-07-02"
     - SELECT lokalizacja.nazwa, pogoda.id FROM lokalizacja INNER JOIN prognoza ON lokalizacja.id=prognoza.Lokalizacja_id INNER JOIN pogoda ON pogoda.id=prognoza.Pogoda_id WHERE prognoza.dataProg="2015-07-02";
  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 meteo.sql, plik eksportu umieścić 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ć widoczne.
  2. Przeskaluj obrazy z zachowaniem proporcji tak, aby ich szerokość nie przekraczała 400px a wysokość nie przekraczała 200px.
  3. Obrazy zapisz w formacie JPG, w folderze WWW, jako kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg. UWAGA: Pliki z folderu baza pozostaw niezmienne, nie nadpisuj ich.

Witryna internetowa

Stwórz prostą witrynę składającą się z jednej strony internetowej o nazwie index.html. Plik zapisz w folderze WWW. Witryna jest zgodna z następującym rysunkiem:

E.14 egzamin praktyczny

Styl elementów witryny zdefiniuj przy pomocy języka CSS. 

Wymagania odnośnie stylu CSS
  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 lewego i stopki: do środka,
  5. Krój czcionki banera i stopki : Arial,
  6. Marginesy wewnętrzne banera i stopki: 20px,
  7. Szerokość panelu lewego: 65%;
  8. Szerokość panelu prawego: 35%;
  9. Wysokość paneli lewego i prawego 500px.

Wymagania odnośnie witryny:

  1. Obsługa polskich liter.
  2. Tytuł strony: Stacja Meteo
  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:
    a. Nagłówek drugiego stopnia o treści „Dokumentacja wyników zapytań w bazie Meteo”,
    b. Tabela 2x2, w komórkach kolejno obrazy kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg zgodnie z rysunkiem z poprzedniej strony,
    c. Obrazy powinny posiadać ramkę o szerokości 1px,
    d. Obrazy powinny posiadać tekst alternatywny. Dla kw1.jpg tekst „kwerenda1”, kw2.jpg – „kwerenda2” , kw3.jpg – „kwerenda3” , kw4.jpg – „kwerenda4”.
  6. Zawartość panelu prawego:
    a. Nagłówek drugiego stopnia o treści „zamiana jednostek temperatury”,
    b. Pole tekstowe i dwa przyciski . Opis pola tekstowego: „temperatura w O C:”( oznaczenie stopnia to litera „o” o indeksie górnym), opis pola „Kelwiny”, opis drugiego przycisku „Fakrenheity”.
    c. Nagłówek drugiego stopnia o treści „Do pobrania”.
    d. Odnośnik o treści „Kwerendy”, prowadzi do pliku kwerendy.txt w folderze baza,
    e. Odnośnik o treści „Eksport MySQL”, prowadzi do pliku meteo.sql w folderze baza,
  7. Zawartość stopki: tekst paragrafu o treści „PESEL AUTORA STRONY: „, A NASTĘPNIE WYPISANY JEST Twój numer PESEL

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:
    a. Sprawdza w polu tekstowym, czy wprowadzono dane i czy dane są liczbą, jeżeli nie, wyświetla w okienku komunikat o treści „Błąd danych”.
    b. Liczy temperaturę w stopniach Kelwina lub Fahrenheita (patrz wzory poniżej).
    c. Wyświetla na stronie pod przyciskami wynik z odpowiednią jednostką, np. 35K.
Sposób obliczania temperatury w Kelwinach O K = O C + 273,15
Sposób obliczania temperatury w Fahrenheitach O F = (OC * 1,8) + 32

Czas przeznaczony na wykonanie zadania wynosi 150 minut

UWAGA 
Po zakończeniu pracy zgłoś PZN Gotowość do przekazania folderu (nazwanego Twoim numerem PESEL). Po otrzymaniu nagranej płyty CD/DVD sprawdź poprawność nagrania i kompletność zawartości. Płytę oraz arkusz egzaminacyjny pozostaw na stanowisku egzaminacyjnym.
Ocenie podlegać będą 5 rezultatów:
  • Utworzone i wykonane zapytania do bazy danych,
  • Grafiki dla strony internetowej,
  • Styl CSS strony internetowej,
  • Strona internetowa,
  • Skrypt przeliczający temperaturę.