Rozwiązanie - Egzamin Praktyczny INF.03

Arkusz INF.03-08-24.06-SG - Czerwiec 2024 - Wersja #08

Skrypt: JavaScript

Baza Danych:

Powiązana zawartość

Przykładowe rozwiązanie

Rozwiązanie - Arkusz praktyczny INF.03-08-24.06-SG - Czerwiec 2024 - Wersja #08

Wymagane zdjęcia

obraz.png

Wyniki działań na bazie danych

import.png

kw1.jpeg

kw2.jpeg

kw3.jpeg

kw4.jpeg

Plik klienci.sql

-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Paź 15, 2024 at 07:31 PM
-- Wersja serwera: 10.4.32-MariaDB
-- Wersja PHP: 8.2.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
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 */;

--
-- Database: `klienci`
--

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

--
-- Struktura tabeli dla tabeli `adresy`
--

CREATE TABLE `adresy` (
  `id` int(10) UNSIGNED NOT NULL,
  `Osoby_id` int(10) UNSIGNED NOT NULL,
  `ulica` text DEFAULT NULL,
  `numer` int(10) UNSIGNED DEFAULT NULL,
  `numerMieszkania` int(11) DEFAULT NULL,
  `miasto` text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Dumping data for table `adresy`
--

INSERT INTO `adresy` (`id`, `Osoby_id`, `ulica`, `numer`, `numerMieszkania`, `miasto`) VALUES
(1, 1, 'Mickiewicza', 54, NULL, 'Poznań'),
(2, 1, 'Sienkiewicza', 124, NULL, 'Poznań'),
(3, 2, 'Zielona', 14, NULL, 'Kraków'),
(4, 3, 'Swobodna', 134, NULL, 'Wrocław'),
(5, 4, 'Traugutta', 14, NULL, 'Warszawa'),
(6, 4, 'Olimpijska', 124, NULL, 'Warszawa');

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

--
-- Struktura tabeli dla tabeli `osoby`
--

CREATE TABLE `osoby` (
  `id` int(10) UNSIGNED NOT NULL,
  `imie` text DEFAULT NULL,
  `nazwisko` text DEFAULT NULL,
  `dataUr` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Dumping data for table `osoby`
--

INSERT INTO `osoby` (`id`, `imie`, `nazwisko`, `dataUr`) VALUES
(1, 'Anna', 'Kowalewska', '2002-11-02'),
(2, 'Ewa', 'Kowalska', '2002-06-02'),
(3, 'Andrzej', 'Nowak', '2001-03-02'),
(4, 'Grzegorz', 'Wojciechowski', '1975-11-02'),
(5, 'Joanna', 'Nowakowska', '1986-02-02'),
(6, 'Anna', 'Nowak', '1974-11-02'),
(7, 'Piotr', 'Wiśniewski', '1975-01-02');

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

--
-- Struktura tabeli dla tabeli `telefony`
--

CREATE TABLE `telefony` (
  `id` int(10) UNSIGNED NOT NULL,
  `Osoby_id` int(10) UNSIGNED NOT NULL,
  `numer` varchar(10) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Dumping data for table `telefony`
--

INSERT INTO `telefony` (`id`, `Osoby_id`, `numer`) VALUES
(1, 1, '111222333'),
(2, 1, '223344556'),
(3, 3, '222333444'),
(4, 2, '333444555'),
(5, 4, '444555666'),
(6, 5, '666665555'),
(7, 6, '223344555'),
(8, 6, '123456789'),
(9, 7, '987654321');

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

--
-- Indeksy dla tabeli `adresy`
--
ALTER TABLE `adresy`
  ADD PRIMARY KEY (`id`),
  ADD KEY `Adresy_FKIndex1` (`Osoby_id`);

--
-- Indeksy dla tabeli `osoby`
--
ALTER TABLE `osoby`
  ADD PRIMARY KEY (`id`);

--
-- Indeksy dla tabeli `telefony`
--
ALTER TABLE `telefony`
  ADD PRIMARY KEY (`id`),
  ADD KEY `Telefony_FKIndex1` (`Osoby_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `adresy`
--
ALTER TABLE `adresy`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT for table `osoby`
--
ALTER TABLE `osoby`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;

--
-- AUTO_INCREMENT for table `telefony`
--
ALTER TABLE `telefony`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
COMMIT;

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

Plik kwerendy.txt

Zapytanie 1: SELECT imie, nazwisko FROM osoby WHERE dataUr >="2001-01-01";
Zapytanie 2: SELECT DISTINCT miasto FROM `adresy` ORDER BY miasto; 
Zapytanie 3: SELECT imie, nazwisko, telefony.numer FROM osoby JOIN telefony ON osoby.id = telefony.Osoby_id;
Zapytanie 4: ALTER TABLE adresy ADD COLUMN numerMieszkania INT AFTER numer;

Plik rejestracja.html

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sklep - rejestracja</title>
        <link rel="stylesheet" href="styl.css">
    </head>
    <body>
        <div id="boczny">
            <img src="obraz.png" alt="promocje">
            <h2>Sprawdź promocje</h2>
            <table>
                <tr>
                    <th>co?</th>
                    <th>ile taniej?</th>
                </tr>
                <tr>
                    <td>ubrania</td>
                    <td>15%</td>
                </tr>
                <tr>
                    <td>buty</td>
                    <td>25%</td>
                </tr>
            </table>
        </div>

        <header>
            <h1>Zarejestruj się w sklepie</h1>
        </header>

        <main>
            <button onclick="klient()">Klient</button>
            <button onclick="adres()">Adres</button>
            <button onclick="kontakt()">Kontakt</button>

            <div id="main1">
                <p>Imię</p>
                <input type="text" name="imie" id="imie" placeholder="Wpisz dane...">
                <p>Nazwisko</p>
                <input type="text" name="nazwisko" id="nazwisko">
                <p>Data urodzenia</p>
                <input type="date" name="data" id="data">
            </div>

            <div id="main2" style="display: none;">
                <p>Ulica</p>
                <input type="text" name="ulica" id="ulica">
                <p>Numer</p>
                <input type="number" name="numer" id="numer">
                <p>Miasto</p>
                <input type="text" name="miasto" id="miasto">
            </div>

            <div id="main3" style="display: none;">
                <p>Numer komórkowy</p>
                <input type="tel" name="tel" id="tel"><br>
                <input type="checkbox" name="rodo" id="rodo"> <label for="rodo">Akceptuję RODO</label><br>
                <button onclick="zatwierdz()">Zatwiedź dane</button>
            </div>
        </main>

        <div id="postep">
            <div></div>
        </div>

        <footer>
            <h4>Rejestrację do sklepu wykonał: <a href="https://ee-informatyk.pl/" target="_blank" style="text-decoration: none;color: unset;">EE-Informatyk.pl</a></h4>
        </footer>

        <script src="skrypt.js"></script>
    </body>
</html>

Plik skrypt.js

function aktywujZakladke(zakladkaId) {
    document.getElementById('main1').style.display = 'none';
    document.getElementById('main2').style.display = 'none';
    document.getElementById('main3').style.display = 'none';

    document.getElementById(zakladkaId).style.display = 'block';
}

function klient() {
    aktywujZakladke('main1');
}

function adres() {
    aktywujZakladke('main2');
}

function kontakt() {
    aktywujZakladke('main3');
}

let postepWartosc = 0;

function aktualizujPostep() {
    if (postepWartosc < 100) {
        postepWartosc += 12;
        if (postepWartosc > 100) {
            postepWartosc = 100;
        }
        document.querySelector('#postep > div').style.width = postepWartosc + '%';
    }
}

document.querySelectorAll('input[type="text"], input[type="date"], input[type="number"], input[type="tel"]').forEach(function (input) {
    input.addEventListener('blur', aktualizujPostep);
});

function zatwierdz() {
    let imie = document.getElementById('imie').value;
    let nazwisko = document.getElementById('nazwisko').value;
    let data = document.getElementById('data').value;
    let ulica = document.getElementById('ulica').value;
    let numer = document.getElementById('numer').value;
    let miasto = document.getElementById('miasto').value;
    let tel = document.getElementById('tel').value;
    let rodo = document.getElementById('rodo').checked ? 'On' : 'Of';
    console.log(imie + ", " + nazwisko + ", " + data + ", " + ulica + ", " + numer + ", " + miasto + ", " + tel + ", " + rodo);
}

Plik styl.css

* {
    font-family: 'Cambria';
}

body {
    background-color: Linen;
}

#boczny,header,footer {
    background-color: SteelBlue;
    color: white;
    text-align: center;
}

#boczny {
    width: 25%;
    height: 510px;
    margin: 0 1%;
    box-shadow: 4px 4px 5px DimGray;
}

header {
    width: 73%;
    height: 80px;
}

main {
    width: 73%;
    height: 400px;
}

button {
    background-color: SteelBlue;
    color: white;
    width: 20%;
    padding: 15px;
    margin-top: 30px;
    font-size: 130%;
    border: none;
}

button:hover {
    background-color: Navy;
}

main > div {
    background-color: LightBlue;
    margin-right: 80px;
    padding: 10px;   
}

#postep {
    background-color: LightGrey;
    width: 73%;
    margin-bottom: 10px;
}

#postep div {
    background-color: Navy;
    width: 4%;
    height: 30px;
}

table {
    width: 100%;
    border: 1px dotted Navy;
}

#boczny {
    float: left;
}

header,
main,
#postep {
    float: right;
}

footer {
    clear: both;
}

Powiązana zawartość

Autorem arkusza jest CKE.GOV.PL

Przełącz motyw

Rozwiązanie - Egzamin Praktyczny INF.03

Arkusz INF.03-08-24.06-SG - Czerwiec 2024 - Wersja #08

Powiązana zawartość

Powiązana zawartość

Strona używa plików cookies