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

EGZAMIN PRAKTYCZNY E.14-02-16.01

STYCZEŃ 2016 ZADANIE 2

Zadanie egzaminacyjne Wykonaj projekt bazy danych sklepu komputerowego, przygotuj zapytania do bazy, a także przedstaw wizualizację projektu za pomocą strony internetowej. Wykorzystaj do tego celu program MSAccess lub LibreOpen Office Base oraz środowisko XAMPP z MySQL i narzędziem phpMyAdmin. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię HTML, grafikę przygotuj w edytorze graki rastrowej.
Aby wykonać zadanie zaloguj się bez hasła na konto Administratora. Na pulpicie znajdziesz plik o nazwie „zad2.zip”. Plik jest spakowany programem 7Zip, zabezpieczony hasłem „Egz!2016”. Plik rozpakuj. Wynik swojej pracy zapisz w folderze. Jako nazwy folderu użyj swojego numeru PESEL, Folder ten umieść na pulpicie konta Administrator. Wewnątrz folderu utwórz podfolder o nazwie baza.
plik baza_zad2.sql z archiwum zad2.zip

-- phpMyAdmin SQL Dump
-- version 4.1.12
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 24 Mar 2015, 09:01
-- 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: `sklep`
--

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

--
-- Struktura tabeli dla tabeli `artykuly`
--

CREATE TABLE IF NOT EXISTS `artykuly` (
  `IDArtykuly` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `ProducenciID` int(10) unsigned NOT NULL,
  `Model` text,
  `Typ` text,
  `Cena` double DEFAULT NULL,
  `CenaPromocja` double DEFAULT NULL,
  `Opis` longtext,
  PRIMARY KEY (`IDArtykuly`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Zrzut danych tabeli `artykuly`
--

INSERT INTO `artykuly` (`IDArtykuly`, `ProducenciID`, `Model`, `Typ`, `Cena`, `CenaPromocja`, `Opis`) VALUES
(1, 1, 'K551LB-XX180D', 'Notebook', 2500, 2400, 'Procesor i7, 4GB RAM'),
(2, 1, 'X551CARF-HCL1201L', 'Notebook', 1000, 980, 'Procesor Intel Celeron 1007U, 4GB RAM'),
(3, 2, 'PORTEGE R30-A-17K', 'Notebook', 4200, 3900, 'Procesor i5, 4GB RAM'),
(4, 2, 'Partner 1TB', 'HDD USB', 250, 240, 'USB 3.0, 1TB');

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

--
-- Struktura tabeli dla tabeli `magazyn`
--

CREATE TABLE IF NOT EXISTS `magazyn` (
  `IDMagazyn` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `Ilosc` int(10) unsigned DEFAULT NULL,
  `CzyZamowic` tinyint(1) DEFAULT NULL,
  PRIMARY KEY (`IDMagazyn`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Zrzut danych tabeli `magazyn`
--

INSERT INTO `magazyn` (`IDMagazyn`, `Ilosc`, `CzyZamowic`) VALUES
(1, 4, 0),
(2, 8, 0),
(3, 0, 1),
(4, 0, 1);

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

--
-- Struktura tabeli dla tabeli `producenci`
--

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

--
-- Zrzut danych tabeli `producenci`
--

INSERT INTO `producenci` (`IDProducenci`, `Nazwa`, `URL`) VALUES
(1, 'Asus', 'asus.pl'),
(2, 'Toshiba', 'toshiba.pl');

/*!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 */;


Zapytania do bazy

Za pomocą narzędzia XAMPP Control Panel uruchom usługę Apache i MySQL. Przejdź następnie do strony http://localhost/phpmyadmin i wybierz narzędzie phpMyAdmin. Wykonaj następujące czynności:

  1. Stwórz bazę danych o nazwie Sklep
  2. Zaimportuj do bazy plik baza_zad2.sql rozpakowany z archiwum zad2.zip
  3. Zapoznaj się ze strukturą bazy danych. Składają się na nią artykuły, producenci oraz magazyn.Każda z nich ma klucz główny rozpoczynający się „ID”, np. IDArtykuly. Tabela artykuly ma klucz obcy ProducenciID połączony z kluczem głównym tabeli producenci. Ponadto tabele magazyn i artykuly są powiązane relacją 1:1 za pomocą kluczy głównych.
  4. Korzystając z zakładki SQL przygotuj zapytania do bazy i wykonaj je. Kwarendy zapisz w pliku kwarendy.txt w podfolderze baza. Lista kwarend do zdefiniowania:
    a. zwrócenie wszystkich modeli i ich typów z tabeli artykuly posortowanych rosnąco według cen.
    b. zwrócenie nazwy producenta, modelu i jego typu dla wszystkich artykułów,
    c. zwrócenie nazwy modelu, dla którego w tabeli magazyn pole ilosc ma wartość 0,
    d. odanie rekordu do tabeli producenci z danymi: ID – 3, nazwa – Samsung, URL – samsung.pl.
  5. Wykonaj zrzuty ektanowe z wynikami działania kwarend a, b, c. Na zrzucie powinny być widoczne zwrócone rekordy. Zrzuty zapisz w podfolderze baza.
  6. Wyeksportuj bazę do pliku sklep.sql i umieść go w podfolderze baza.

Projekt bazy danych

Baza danych Sklep jest niewielką częścią całego projektu. Należy ten projekt rozbudować o kolejne tabele i relacje. W programie MSAccecss lub LibreOffice Base stwórz projekt bazy danych. Zapisz go pod nazwą sklep z odpowiednim rozszerzeniem w podkatalogu baza. W tym celu:
  1. Stwórz tabele artykuly, producenci, magazyn z polami i typami zgodnymi z importem baza_zad2.sql. Dodaj relacje.
  2. Dodaj tabelę klienci o polach:
    a. IDKlient, klucz główny,
    b. Nazwa, Adres, NIP typu tekstowego,
  3. Dodaj tabelę zamówienia o polach:
    a. IDZamowienia, klucz główny,
    b. KlientID, klucz obcy łączący się 1:n z tabelą klienci,
    c. Status, typu liczbowego
    d. Data typu data,
    e. NrFaktury typu tekst.
  4. Dodaj tabelę opisZamowienia, o polach:
    a. IDOpisZamowienia, klucz główny,
    b. ZamowieniaID, klucz obcy łączący się relacją 1:n z tabelą zamowienia,
    c. ArtykulyID, klucz obcy łączący się relacją 1:n z tabelą artykuly,
    d. Ilosc typu liczbowego,
  5. Zdefiniuj między tabelami odpowiednie relacje.
  6. Wykonaj zrzut ekranu okna projektu relacji z widoczną graficzną reprezentacją tabel i powiązań między nimi. Obraz przytnij w edytorze grafiki rastrowej tak, aby widoczny był tylko obszar roboczy projektu (bez ram okna aplikacji, ikon programu itp.). Następnie obraz przeskaluj, zachowując jego proporcje tak, aby wysokość była nie większa niż 300 px, a szerokość nie większa niż 800 px.
  7. Obraz zapisz jako projekt.jpg w podfolderze baza.

Witryna internetowa

Stwórz prostą witrynę skłądającą się z jednej strony internetowej o nazwie index.html. Plik umieść w folderze oznaczonym Twoim numerem PESEL. Witryna jest zgodna z rysunkiem poniżej.

E.14 egzamin praktyczny

W celu wykonania witryny:
  1. Umieść tytuł strony „Baza danych sklep komputerowy” w odpowiednim znaczniku części nagłówkowej strony.
  2. Zdefiniuj podział strony na baner, panele lewy i prawy oraz stopkę przy pomocy znaczników <div>.
  3. Zdefiniuj style poszczególnych bloków za pomocą CSS, wewnątrz HTML.
  4. Styl banera oraz stopki ustal na:
    a. Czcionka biała,
    b. kolor tła: #6F851E,
    c. wewnętrzne marginesy 10 px,
    d. tekst wyrównany do środka, czcionka pochyła,
  5. Styl panelu lewego ustal na:
    a. czcionka biała (odsyłacze też białe),
    b. kolor tła: #7C9421, Szerokość 25%, wysokość 400 px,
    c. wyrównanie tekstu do prawej strony.
  6. Styl panelu prawego ustal na:
    a. szerokość panelu 75%, wysokość 400 px,
    b. wyrównanie tekstu do środka,
  7. Na banerze umieść napis o treści: „PROJEKT BAZY DANYCH SKLEPU KOMPUTEROWEGO” w nagłówku pierwszego stopnia,
  8. W panelu lewym umieść:
    a. napis „AUTOR STRONY” w nagłówku trzeciego stopnia,
    b. poniżej napis, na który będzie się składał Twój PESEL,
    c. poniżej napis „PLIKI DO POBRANIA” w  trzeciego stopnia,
    d. poniżej listę nienumerowaną z odsyłaczami (hiperłączami), Odsyłącz o treści „Karendy” wskazuje na plik baza/kwarendy.txt. Odsyłącz o treści „Eksport MySQL” wskazuje na plik baza/sklep.sq;.
  9. W panelu prawym umieść rysunek projekt.jpg z podfolderu baza. Rysunek powinien posiadać atrybuty:
    a. skrót alternatywny „sklep komputerowy”,
    b. ramkę o szerokości 3 px,
    c. odległość w pionie od wszelkich elementów (atrybut vspace). Wartość atrybutu należy obliczyć tak, aby obraz znajdował się w środku przestrzeni panelu. Np. jeśli obraz ma wysokość 200 px, panel ma stałą wysokość 400 px, to odległość od góry bloku należy ustawić na 100 px, (100px +200px +100px =400px).
  10. W stopce umieść napis o składni „Egzamin E.14 Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami” w nagłówku drugiego stopnia.
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 folderu. Płytę oraz arkusz egzaminacyjny pozostaw na stanowisku egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 min.
Ocenie podlegać będą 4 rezultaty:

  • utworzenie i wykonanie zapytania do bazy danych, 
  • baza danych
  • styl strony internetowej i grafika strony,
  • strona internetowa.