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

EGZAMIN PRAKTYCZNY E.14-01-17.01

STYCZEŃ 2017 ZADANIE 1

Zadanie egzaminacyjne

Wykonaj aplikację internetową wspomagającą pracę komisu samochodowego. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię lub edytora WYSIWYG.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie komis.zip zabezpieczone hasłem 4uto20!7.
Plik należy rozpakować.

plik komis.sql z archiwum komis.zip
-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Czas generowania: 15 Lut 2016, 12:40
-- Wersja serwera: 10.1.9-MariaDB
-- Wersja PHP: 5.6.15

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

--
-- Baza danych: `komis`
--

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

--
-- Struktura tabeli dla tabeli `samochody`
--

CREATE TABLE `samochody` (
  `id` int(10) UNSIGNED NOT NULL,
  `marka` text,
  `model` text,
  `rocznik` year(4) DEFAULT NULL,
  `kolor` text,
  `stan` text
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `samochody`
--

INSERT INTO `samochody` (`id`, `marka`, `model`, `rocznik`, `kolor`, `stan`) VALUES
(1, 'Fiat', 'Punto', 2016, 'czerwony', 'bardzo dobry'),
(2, 'Fiat', 'Punto', 2002, 'czerwony', 'dobry'),
(3, 'Fiat', 'Punto', 2007, 'niebieski', 'bardzo bobry'),
(4, 'Opel', 'Corsa', 2016, 'grafitowy', 'bardzo dobry'),
(5, 'Opel', 'Astra', 2003, 'niebieski', 'porysowany lakier'),
(6, 'Toyota', 'Corolla', 2016, 'czerwony', 'bardzo dobry'),
(7, 'Toyota', 'Corolla', 2014, 'szary', 'dobry'),
(8, 'Toyota', 'Yaris', 2004, 'granatowy', 'dobry');

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

--
-- Struktura tabeli dla tabeli `zamowienia`
--

CREATE TABLE `zamowienia` (
  `id` int(10) UNSIGNED NOT NULL,
  `Samochody_id` int(10) UNSIGNED NOT NULL,
  `Klient` text,
  `telefon` text,
  `dataZam` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `zamowienia`
--

INSERT INTO `zamowienia` (`id`, `Samochody_id`, `Klient`, `telefon`, `dataZam`) VALUES
(1, 3, 'Anna Kowalska', '111222333', '2016-02-15'),
(2, 6, 'Jan Nowakowski', '222111333', '2016-02-15'),
(3, 8, 'Marcin Kolwal', '333111222', '2016-02-15');

--
-- Indeksy dla zrzutów tabel
--

--
-- Indexes for table `samochody`
--
ALTER TABLE `samochody`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `zamowienia`
--
ALTER TABLE `zamowienia`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT dla tabeli `samochody`
--
ALTER TABLE `samochody`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
--
-- AUTO_INCREMENT dla tabeli `zamowienia`
--
ALTER TABLE `zamowienia`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
/*!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 */;


Wyniki swojej pracy zapisz w folderze stworzonym na pulpicie konta Egzamin. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieś w tym folderze.

Operacje na bazie danych

Baza danych Komis zgdna jest ze strukturą przedstawioną na rysunku 1. Tabela zamowienia ma klucz obcy samochody_id będący w relacji z kluczem głównym tabeli Samochody.

E.14 egzamin praktyczny

Otwórz program XAMPP Control Panel i uruchom usługi MySQL i Apache, przejdź do narzędzie PHPMyAdmin. Następnie wykonaj operacje a bazie danych:

  • Utwórz nową bazę danych o nazwie komis;
  • Do bazy komis zaimportuj tabele z pliku komis.sql z wcześniej rozpakowanego archiwum;
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z Twoim numerem PESEL w formacie PNG i nazwij bazaDanych.png. Na zrzucie powinny być widoczne elementy wskazzujące na poprawnie wykonany import bazy;
  • Utwórz nastepujące zapytania SQL do bazy komis i sprawdź poprawność ich działania:
    • zapytanie 1: wybierając jedynie pola id, marka i model ze wszystkich rekordów tabeli Samochody,
    • zapytanie 2: wybierające jedynie pola id samochodu oraz Klient dla wszystkich rekordów tabeli Zamówienia,
    • zapytanie 3: wybierające wszystkie pola z tabeli Samochody, dla których marka to Fiat;
  • Poprawnie działające zapytania zapisz w folderze z Twoim numerem PESEL, w pliku kwerendy.txt.
  • Zapytania ponumeruj, stosując format zapisu: "zapytanie 1: ... treść zapytania ...";
  • Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPG. Nadaj im nazwy kwerenda1, kwerenda2, kwerenda3. Zrzuty powinny być czytelene.

Witryna internetowa

Witryna internetowa przedstawiona jest na rysunku 2.

E.14 egzamin praktyczny

Przygotowanie grafiki:
  • plik auto.png wypakowany z archiwum należy przeskalować do wymiarów: szerokość 100 px, wysokość 50 px. Pozostałych atrybutów obrazu nie należy zmieniać.

Cechy witryny:
  • nazwa pliku: atuo.php;
  • zastosowany standard kodowania polskich znaków;
  • tytuł strony widoczny na karcie przeglądarki: "Komis Samochodowy"
  • arkusz stylów w pliku o nazwie auto.css prawidłowo połączony z kodem strony;
  • podział strony na bloki: baner, panele lewy i prawy, stopka zrealizoway z pomocą znaczników sekcji zgodnie z rysunkiem 2;
  • zawartość banera: nagłówek pierwszego stopnia o treści: "SAMOCHODY"
  • zawartość panelu lewego:
    • nagłówek drugiego stopnia o treści: "Wykaz samochodów",
    • lista nienumerowana (wypunktowana) wypełniana za pomocą skryptu nr 1,
    • nagłówek drugiego stopnia o treści: "Zamówienia",
    • lista nienumerowana (wypunktowana) wypełniana za pomocą skryptu nr 2;
  • zawartość panelu prawego
    • nagłówek drugiego stopnia o treści: "Pełne dane: Fiat",
    • skrypt nr 3;
  • zawartość stopki: tabela o jednym wierszu i trzech kolumnach:
    • w komórce 1 odnośnik o treści "Kwerendy" prowadzący do pliku kwerendy.txt,
    • w komórce 2 napis "Autor" oraz wstawiony Twój numer PESEL,
    • w komórce 3 obraz auto.png. Tekst alternatywny "komis samochodowy".

Styl CSS witryny internetowej

Plik auto.css zawiera formatowanie dla:
  • banera: kolor tła #45517D, biały kolor czcionki, rozmiar czcionki 120%, wyrównanie tekstu do prawej strony wysokość banera 60px;
  • panelu lewego: kolor tła #61B2EC, szerokość 40%, wysokość 500px;
  • panelu prawego: kolor tła #8EC9F2; szerokość 60%, wysokość500px;
  • stopki: kolor tła #45517D, biały kolor czcionki, rozmiar czcionki 150%, wyrównanie tekstu do środka
  • odnośników: odnośnik niewybrany w kolorze pomarańczowym, odwiedzony w kolorze zielonym;
  • tabeli: szerokość tabeli zajmuje 100% strony
Niewymienione właściwości obiektów przyjmują wartości domyślne.

Skrypt połączenia z bazą

Wmagania dotyczące skryptu:
  • napisany w języku PHP;
  • nie jest wymagane sprawdzanie czy operacja powiodła się;
  • skrypt łączy się z sewerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie komis;
  • na końcu działania skryptu powinno zostać obsłużone zamknięcie połączenia z serwerem;
  • działanie skryptu nr 1
    • skrypt wysyła do bazy zapytanie 1 (z pliku kwerendy.txt)
    • każdy rekord (id, marka, model) jest wyświetlany w kolejnym punkcie listy "Wykaz samochodów"
  • działanie skryptu nr 2
    • skrypt wysyła do bazy zapytanie 2 (z pliku kwerendy.txt)
    • każdy rekord (id, marka, model) jest wyświetlany w kolejnym punkcie listy "Zamówienia"
  • działanie skryptu nr 3
    • skrypt wysyła do bazy zapytanie 3 (z pliku kwerendy.txt)
    • każdy rekord wyświetlany jest w osobnej linii , pola rekordu oddzielone znakiem /

UWAGA: po zakończeniu pracy zgłoś przewodniczącemu ZN gotowość do nagrania płyty CD/DVD z rezultatami pracy. W folderze z Twoim numerem PESEL powinny się znajdować pliki: import.png, kwerendy.txt, oszczep.php, styl_oszczep.css, ewentualnie inne przygotowane przez Ciebie pliki. Po nagraniu płyty CD/DVD sprawdź liczbę oraz poprawność działania zapisanych plików.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie podlegać będą 4 rezultaty:
  • operacje na bazie danych,
  • witryna internetowa,
  • styl CSS witryny internetowej,
  • skrypt połączenia z bazą.

Do pobrania plik auto.png:

E.14 egzamin praktyczny