Co właściwie oznacza INF.03?
Pełna nazwa kwalifikacji brzmi: Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych.
Nie chodzi więc wyłącznie o napisanie kilku znaczników HTML. W trakcie nauki poznajesz elementy potrzebne do zbudowania prostej aplikacji internetowej i połączenia jej z bazą danych.
Można to przedstawić w uproszczony sposób:
HTML ↓ CSS ↓ JavaScript ↓ PHP ↓ MySQL / SQL
HTML tworzy strukturę strony, CSS odpowiada za jej wygląd, JavaScript pozwala reagować na działania użytkownika, PHP wykonuje kod po stronie serwera, a SQL umożliwia pracę z bazą danych.
Cztery główne obszary INF.03
Pierwszym obszarem są strony internetowe, czyli przede wszystkim HTML i CSS. Powinieneś umieć tworzyć strukturę dokumentu, stosować nagłówki i akapity, odnośniki, obrazy, listy, tabele i formularze. Dochodzą do tego znaczniki semantyczne oraz formatowanie strony za pomocą zewnętrznego arkusza CSS.
Drugim obszarem jest JavaScript. To dzięki niemu strona może reagować na działania wykonywane w przeglądarce.
const przycisk = document.querySelector("#przycisk");
przycisk.addEventListener("click", function () {
alert("Kliknięto przycisk");
});
Na poziomie INF.03 trzeba rozumieć między innymi: zmienne, operatory, if / else, pętle, funkcje, DOM, zdarzenia, formularze oraz proste obliczenia.
Trzeci duży dział to bazy danych i SQL. Wyobraź sobie tabelę:
klienci -------------------------- id imie nazwisko telefon
Możemy pobrać z niej wybrane informacje za pomocą zapytania:
SELECT imie, nazwisko FROM klienci ORDER BY nazwisko;
W kursie trzeba opanować między innymi: SELECT, FROM, WHERE, ORDER BY, GROUP BY, INSERT, UPDATE, DELETE, JOIN — oraz podstawowe pojęcia: tabela, rekord, kolumna, klucz główny, klucz obcy, relacja.
Czwartym obszarem jest PHP i tworzenie aplikacji internetowej.
<?php echo "Witaj na stronie"; ?>
PHP może również odebrać dane przesłane przez formularz:
<?php $imie = $_POST['imie']; ?>
Następnie może komunikować się z bazą danych. Warto od początku rozumieć cały przepływ:
UŻYTKOWNIK
↓
FORMULARZ HTML
↓
PHP
↓
MYSQL
↓
PHP
↓
WYNIK W PRZEGLĄDARCE
Ten schemat będzie wracał w dalszej części kursu.
INF.03 to nie wyłącznie pisanie kodu
W zadaniach mogą pojawić się również materiały przeznaczone do wykorzystania na stronie. Dlatego trzeba zwracać uwagę na formaty plików graficznych, rozdzielczość, kadrowanie, podstawową obróbkę obrazów, multimedia i przygotowanie materiałów do WWW.
Jeżeli arkusz dostarcza grafikę i nakazuje wykonać na niej konkretną operację, należy wykonać dokładnie to, czego wymaga polecenie.
Jak zbudowany jest egzamin?
Egzamin zawodowy obejmuje część pisemną i część praktyczną. Sprawdzają one wiedzę w inny sposób.
W części pisemnej ważne jest rozumienie pojęć oraz fragmentów kodu. Możesz przykładowo zobaczyć:
SELECT * FROM produkty WHERE cena > 100;
i zostać zapytany o rezultat takiego zapytania. Podobnie trzeba umieć interpretować CSS, JavaScript czy fragment PHP. Nie wystarczy więc rozpoznawać komendy — trzeba wiedzieć, co faktycznie robią.
Część praktyczna polega natomiast na wykonaniu poleceń zawartych w arkuszu. W zależności od zadania może pojawić się na przykład taki ciąg prac:
przygotowanie grafiki
↓
utworzenie strony HTML
↓
formatowanie CSS
↓
wykonanie zapytań SQL
↓
utworzenie skryptu
↓
sprawdzenie działania
Nie oznacza to, że każdy arkusz będzie zbudowany identycznie. Czas i sposób wykonania wynikają z konkretnego arkusza. Właśnie dlatego w kursie trzeba nauczyć się technologii i sposobu rozwiązywania poleceń, a nie jednego gotowego zadania na pamięć.
Praktyczna INF.03 nie zawsze sprowadza się do formularza, INSERT i wyświetlenia rekordów. Arkusze mogą obejmować SQL, grafikę, CSS, JavaScript, PHP, bazę danych i inne wymagane operacje — w różnych kombinacjach.
Arkusz traktuj jak specyfikację
To jedna z najważniejszych zasad podczas części praktycznej. Jeżeli w poleceniu znajduje się:
Kolor tła nagłówka: #00838F
nie wybierasz koloru, który wygląda podobnie. W CSS wpisujesz:
header {
background-color: #00838F;
}
Jeżeli arkusz wymaga obrazu baner.jpg o szerokości 100%, realizujesz właśnie takie wymaganie. Na egzaminie nie projektujesz strony według własnego gustu. Realizujesz specyfikację.
Rozbijaj polecenia na małe czynności
Bardzo przydatne jest wychwytywanie czasowników takich jak: utwórz, zastosuj, wyświetl, zapisz, zmodyfikuj, usuń, posortuj, wybierz, połącz, ustaw.
Przykład:
Wyświetl nazwę i cenę produktów droższych niż 100 zł, uporządkowanych rosnąco według ceny.
Można rozłożyć to polecenie następująco:
wyświetl nazwę i cenę
↓
SELECT nazwa, cena
produkty
↓
FROM produkty
droższe niż 100 zł
↓
WHERE cena > 100
rosnąco według ceny
↓
ORDER BY cena ASC
Z tego powstaje:
SELECT nazwa, cena FROM produkty WHERE cena > 100 ORDER BY cena ASC;
Takiego sposobu analizowania poleceń będziemy używać również w kolejnych lekcjach.
Nie komplikuj zadania bez potrzeby
Jeżeli arkusz wymaga prostej strony, nie ma sensu od razu dokładać Bootstrapa, animacji, frameworka JavaScript, dodatkowego menu, własnych formularzy ani efektów hover. Najpierw wykonujesz elementy wymagane w arkuszu.
Ta sama zasada dotyczy plików. Jeżeli wymagane są index.html, styl.css, skrypt.js — nie twórz zamiast nich innych nazw, jeżeli arkusz nie daje ku temu powodu. Odwołania również muszą prowadzić do rzeczywiście istniejących plików:
<link rel="stylesheet" href="styl.css">
Ucz się rozumienia kodu
Nie próbuj zapamiętać wszystkich przykładów znak po znaku. Spójrz na taki fragment:
if ($wiek >= 18) {
echo "Pełnoletni";
}
Powinieneś umieć wyjaśnić go własnymi słowami: jeżeli wartość zmiennej $wiek jest większa lub równa 18, zostanie wyświetlony napis „Pełnoletni”. To znacznie ważniejsze niż mechaniczne nauczenie się kilku przykładów.
Jak pracować z tym kursem?
Najlepszy efekt daje połączenie teorii z natychmiastowym ćwiczeniem. Schemat nauki może wyglądać tak:
PRZECZYTAJ
↓
PRZEPISZ KOD
↓
URUCHOM
↓
ZMIEŃ JEDNĄ RZECZ
↓
SPRAWDŹ EFEKT
↓
NAPISZ PONOWNIE Z PAMIĘCI
Przykładowo zaczynasz od p { color: red; }, potem zmieniasz wartość na blue, a następnie próbujesz samodzielnie wykorzystać background-color, font-size i text-align. W ten sposób uczysz się działania CSS, zamiast jedynie kopiować gotowe rozwiązania.
Mini zadanie
Przeczytaj polecenie:
Utwórz stronęindex.html. Dołącz zewnętrzny arkuszstyl.css. W nagłówku umieść tekst „Sklep komputerowy”. Tło nagłówka ustaw na#455A64.
Najpierw spróbuj wykonać je samodzielnie. Przykładowe rozwiązanie HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sklep komputerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep komputerowy</h1>
</header>
</body>
</html>
Plik styl.css:
header {
background-color: #455A64;
}
INF.02 a INF.03
INF.02 (sieci, serwery, Active Directory) to osobna kwalifikacja. VLAN i DHCP tu nie punktują. Jeśli idziesz na oba egzaminy — ucz się ich osobno.