Egzamin: Kwalifikacja E.14, Rodzaj: egzamin praktyczny, Oznaczenie: E.14-02-18.01, Termin: styczeń 2018

Wykonaj aplikację internetową portalu ogłoszeniowego. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy.zip zabezpieczone hasłem: Zad4ni3

Archiwum należy rozpakować.

Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Po skończonej pracy wyniki zapisz także w tym folderze.

Baza danych

Zawartość pliku baza.sql:

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Czas generowania: 28 Lis 2016, 12:33
-- Wersja serwera: 10.1.19-MariaDB
-- Wersja PHP: 5.6.28

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: `ogloszenia`
--

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

--
-- Struktura tabeli dla tabeli `ogloszenie`
--

CREATE TABLE `ogloszenie` (
  `id` int(10) UNSIGNED NOT NULL,
  `uzytkownik_id` int(10) UNSIGNED NOT NULL,
  `kategoria` int(10) UNSIGNED DEFAULT NULL,
  `podkategoria` int(10) UNSIGNED DEFAULT NULL,
  `tytul` text,
  `tresc` text
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `ogloszenie`
--

INSERT INTO `ogloszenie` (`id`, `uzytkownik_id`, `kategoria`, `podkategoria`, `tytul`, `tresc`) VALUES
(1, 1, 1, 12, 'Daniel Craig. Biografia', 'Biografia Daniela Craiga, niedrogo sprzedam'),
(2, 1, 1, 13, 'Selekcja', 'Sprzedam: "Selekcja" J. Kellermana, niezniszczona'),
(3, 2, 1, 13, 'Buick', 'Sprzedam horror Stephena Kinga w dobrym stanie'),
(4, 2, 1, 14, 'Tytus, Romek i Atomek', 'Ks. IV do sprzedania, stan dobry'),
(5, 2, 2, 0, 'Imagine Dragons', 'Sprzedam dwa CD Imagine Dragons');

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

--
-- Struktura tabeli dla tabeli `uzytkownik`
--

CREATE TABLE `uzytkownik` (
  `id` int(10) UNSIGNED NOT NULL,
  `imie` text,
  `nazwisko` text,
  `telefon` text,
  `email` text
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Zrzut danych tabeli `uzytkownik`
--

INSERT INTO `uzytkownik` (`id`, `imie`, `nazwisko`, `telefon`, `email`) VALUES
(1, 'Anna', 'Kowalska', '601601601', 'anna@poczta.pl'),
(2, 'Jan', 'Nowak', '608608608', 'jan@poczta.pl');

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

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

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT dla tabeli `ogloszenie`
--
ALTER TABLE `ogloszenie`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
--
-- AUTO_INCREMENT dla tabeli `uzytkownik`
--
ALTER TABLE `uzytkownik`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
/*!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 */;

 

Operacje na bazie danych

Baza danych jest zgodna ze strukturą przedstawioną na obrazie 1. Tabela ogloszenie ma klucz obcy uzytkownik_id będący w relacji z kluczem głównym tabeli uzytkownik. Pole kategoria przyjmuje wartości
liczbowe: 1 – książki, 2 – muzyka.

Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych:

• Utwórz nową bazę danych o nazwie ogloszenia
• Do bazy ogloszenia zaimportuj tabele z pliku baza.sql z wcześniej rozpakowanego archiwum
• Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL, w formacie JPEG i nazwij baza.jpg. Nie kadruj zrzutu. Powinien on obejmować cały ekran, z widocznym paskiem zadań.
  Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
• Zapisz i wykonaj zapytania SQL działające na bazie ogłoszenia. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania
  kwerend. Zrzuty zapisz w formacie JPEG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran komputera z widocznym paskiem zadań.
  • Zapytanie 1: wybierające jedynie pola id, imie, nazwisko, email z tabeli uzytkownik dla tych
    rekordów, dla których id jest mniejsze od 4
  • Zapytanie 2: wybierające jedynie tytuł tego ogłoszenia, którego właściciel ma id równe 1
  • Zapytanie 3: tworzące użytkownika admin na localhost z hasłem zaq1@
  • Zapytanie 4: nadające prawa dla użytkownika admin do przeglądania, usuwania i zmiany danych w rekordach w tabeli uzytkownik

Witryna internetowa

Przygotowanie grafiki

• Plik ksiazki.jpg, wypakowany z archiwum, należy przeskalować do wymiarów: szerokość 180 px, wysokość 270 px. Pozostałych atrybutów obrazu nie należy zmieniać

Cechy witryny

• Nazwa pliku: portal.php
• Zastosowany właściwy standard kodowania polskich znaków
• Tytuł strony widoczny na karcie przeglądarki: „Ogłoszenia drobne”
• Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
• Podział strony na bloki: baner, panele lewy i prawy, stopka zrealizowany za pomocą znaczników sekcji, tak aby po uruchomieniu strony w przeglądarce wygląd był zgodny z obrazem 2
• Zawartość banera: nagłówek drugiego stopnia o treści: „Ogłoszenia drobne”
• Zawartość panelu lewego:
  • Nagłówek drugiego stopnia o treści: „Ogłoszeniodawcy”
  • Skrypt połączenia z bazą
• Zawartość panelu prawego:
  • Nagłówek drugiego stopnia o treści: „Nasze kategorie”
  • Lista punktowa (nieuporządkowana) z trzema elementami: Książki, Muzyka, Multimedia
  • Obraz ksiazki.jpg z tekstem alternatywnym o treści: „uwolnij swoją książkę”
  • Tabela o wymiarach 3 x 3. Ostatnia kolumna zawiera dwa wiersze scalone. Zawartość i wygląd tabeli zgodne ze wzorem:

• Zawartość stopki: napis o treści: „Portal ogłoszenia drobne opracował:”, dalej wstawiony Twój numer PESEL.

Styl CSS witryny internetowej

Plik styl2.css zawiera formatowanie:

• Banera: kolor tła #5A9089, biały kolor czcionki, krój czcionki: Verdana, wyrównanie tekstu do środka,
  wysokość 100 px
• Panelu lewego: kolor tła # BAD2CF, szerokość 55%, wysokość 600 px
• Panelu prawego: kolor tła #88AFAA, szerokość 45%, wysokość 600 px
• Stopki: kolor tła #5A9089, biały kolor czcionki, wyrównanie tekstu do prawej strony
• Tabeli, komórki tabeli: obramowanie na 1 px linią kropkowaną zieloną, szerokość tabeli 400 px, marginesy zewnętrzne 15 px, wyrównanie tekstu do środka
• Obrazu: marginesy wewnętrzne 25 px
• Listy punktowanej: styl punktora – okrąg

Niewymienione właściwości selektorów przybierają wartości domyślne.

Skrypt połączenia z bazą

W tabeli 2 podano wybór funkcji PHP do obsługi bazy danych. Wymagania dotyczące skryptu:

• Napisany w języku PHP
• Nie jest wymagane sprawdzenie, czy operacja na bazie danych powiodła się
• Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie ogloszenia
• Skrypt wysyła do bazy danych dwa zapytania:
  • zapytanie 1 (patrz punkt „Operacje na bazie danych”)
  • zapytanie 2 (patrz punkt „Operacje na bazie danych”) zmodyfikowane tak, aby dla danego id użytkownika pobierany był tylko pierwszy tytuł ogłoszenia z jego ogłoszeń
• Dla każdego zwróconego zapytaniem wiersza wykonuje działania:
  • Wyświetla w nagłówku trzeciego stopnia pola: id imie nazwisko
  • Wyświetla w akapicie email
  • W kolejnym akapicie wyświetla tekst: „Ogłoszenie:” i dalej pierwszy tytuł ogłoszenia pobrany zmodyfikowanym zapytaniem 2
• Na końcu działania skrypt zamyka połączenie z serwerem.