Rozwiązujemy arkusz z klasą Osoba i formularzem zapisu na kursy w wersji C# + React: w konsoli klasa z prywatnymi polami, publicznym licznikiem statycznym, trzema konstruktorami (bezparametrowym, z dwoma parametrami i kopiującym) i metodą powitania, a w programie głównym testy z części III; w przeglądarce jednokomponentowa aplikacja React z Bootstrapem - lista kursów, formularz i wynik zapisu w konsoli przeglądarki. Do tego zrzuty i dokument egzamin.
Kroki idą zdanie po zdaniu za treścią arkusza - każdy zaczyna się poleceniem z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Najpierw piszemy najprostszą wersję, której wymaga klucz, a w etapie „Dobre praktyki” poprawiamy to, czego klucz nie sprawdza.
Co widać w podglądzie. Wyniki programu konsolowego pochodzą z prawdziwego uruchomienia kodu z danego kroku (.NET 10) z danymi wpisanymi z klawiatury. Podgląd aplikacji webowej wykonuje kod komponentu z kroku w prawdziwym Reakcie z Bootstrapem, a u dołu ma panel konsoli przeglądarki (to, co na egzaminie widać po F12): wpisz imię i numer kursu, kliknij „Zapisz do kursu”. Wszystkie scenariusze sprawdziliśmy też na prawdziwym projekcie Vite.
Arkusz pozwala też na C++, Javę albo Pythona w konsoli i na Angulara w części webowej - ten wariant to jedna z możliwych dróg.
Jak liczą się punkty. Klucz ma 34 kryteria (R.1.1 - R.4.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 26 punktów - można stracić 8 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Krok 1 · po tym etapie masz 0 z 34 kryteriów (pkt)
Utwórz folder i nazwij go swoim numerem. W folderze utwórz podfoldery: konsola, web, testy.
Na pulpicie zakładamy folder o nazwie z numerem PESEL, a w nim konsola, web i testy. W tym arkuszu zrzuty ekranu obu aplikacji i dokument egzamin trafiają do folderu testy. Arkusz nie ma archiwum z materiałami.
Kroki 2-9 · po tym etapie masz 12 z 34 kryteriów (pkt)
Korzystając z mechanizmów programowania obiektowego zaprojektuj część logiki systemu forum użytkowników. Zastosowano obiektowy język programowania zgodny z zainstalowanym na stanowisku egzaminacyjnym: C++ lub C#, lub Java, lub Python.
Wybieramy C#. W Visual Studio: Utwórz nowy projekt → Aplikacja konsolowa, nazwa konsola (stąd archiwum konsola.zip); w terminalu to samo daje dotnet new console -n konsola. W Program.cs zostawiamy klasę Program z pustą metodą Main - klasę Osoba dopiszemy nad nią.
konsola/Program.cs C# nowy plik class Program
{
static void Main()
{
}
}Zaimplementuj klasę o nazwie osoba z konstruktorami, metodą i obsługą pola statycznego. Klasa Osoba zawiera: Dwa pola: numeryczne id oraz tekstowe imię osoby. Dostęp do obu pól ma jedynie klasa. W przypadku późniejszego rozszerzenia klasy, klasy potomne nie mają dostępu do tych pól.
Nazwa klasy Osoba jest narzucona przez arkusz, nazwy pól wybieramy sami. „Dostęp ma jedynie klasa, klasy potomne nie” to dokładnie modyfikator private - protected dopuściłby klasy potomne, a public wszystkich (R.2.2). Typy: int na liczbę całkowitą, string na tekst (R.1.5). Pola nazywamy znacząco: id i name (R.1.4).
protected zamiast private - klasy potomne miałyby dostęp do pól, czego arkusz zabrania.
konsola/Program.cs C# zmienione: 6 linii class Osoba
{
private int id;
private string name;
}
class Program
{
static void Main()
{
}
}Ogólnie dostępne pole statyczne zliczające liczbę instancji klasy, początkowo wypełnione wartością 0.
Pole static należy do klasy, a nie do pojedynczego obiektu - jest jedno, wspólne dla wszystkich osób, więc nadaje się na licznik. „Ogólnie dostępne” to public, a wartość początkowa 0. Z zewnątrz odczytamy je przez nazwę klasy: Osoba.InstanceCount (R.2.3).
konsola/Program.cs C# zmienione: 1 linia class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
}
class Program
{
static void Main()
{
}
}Trzy konstruktory: bezparametrowy, ustawia wartości 0 i pusty dla pól. Każdy z konstruktorów dodatkowo inkrementuje liczbę instancji klasy.
Konstruktor ma nazwę klasy i nie ma typu zwracanego. Ustawia id na 0, imię na pusty napis "" i zwiększa licznik instancji o jeden (InstanceCount++) - każde new Osoba() to jedna osoba więcej (R.2.4, R.2.3).
konsola/Program.cs C# zmienione: 7 linii class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
}
class Program
{
static void Main()
{
}
}Konstruktor z dwoma parametrami, które przekazują wartości id i imienia.
Drugi konstruktor o tej samej nazwie, ale z innymi parametrami - to przeciążenie konstruktora; C# wybiera wersję po liczbie i typach argumentów. Parametry nazywają się tak jak pola, więc pole wskazujemy przez this: this.id = id przepisuje wartość parametru do pola obiektu (R.2.5). On też zwiększa licznik.
id = id; bez this przypisuje parametr sam do siebie - pole zostaje z wartością 0.
konsola/Program.cs C# zmienione: 7 linii class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
}
class Program
{
static void Main()
{
}
}Konstruktor kopiujący.
Konstruktor kopiujący przyjmuje inny obiekt tej samej klasy i przepisuje jego pola do nowego obiektu (R.2.6). Pola other.id i other.name są prywatne, ale to wciąż kod klasy Osoba - w C# metody klasy mają dostęp do pól prywatnych każdego jej obiektu. Powstaje nowa, niezależna osoba o tych samych danych, więc licznik też rośnie.
Osoba copy = person; to nie kopia, tylko druga zmienna wskazująca ten sam obiekt - nie powstaje nowa instancja i licznik się nie zmienia.
konsola/Program.cs C# zmienione: 7 linii class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
}
class Program
{
static void Main()
{
}
}Metodę do wypisania imienia obiektu klasy Osoba w postaci: „Cześć <argument>, mam na imię <imie>”, gdzie pole <argument> jest innym imieniem przekazanym jako parametr wejściowy metody.
Metoda przyjmuje imię rozmówcy (otherName) i wypisuje napis sklejony z niego i z imienia zapisanego w obiekcie (R.2.7). Nie zwraca wartości, więc ma typ void. Nazwa Greet („przywitaj”) mówi, co robi (R.1.3).
konsola/Program.cs C# zmienione: 5 linii class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
public void Greet(string otherName)
{
Console.WriteLine("Cześć " + otherName + ", mam na imię " + name);
}
}
class Program
{
static void Main()
{
}
}Jeżeli w obiekcie nie wypełniono wartości pola z imieniem wyświetlany jest komunikat „Brak danych”.
Obiekt z konstruktora bezparametrowego ma imię "". Sprawdzamy to warunkiem i wtedy wypisujemy „Brak danych” zamiast powitania (R.2.8).
konsola/Program.cs C# zmienione: 8 linii class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
public void Greet(string otherName)
{
if (name == "")
{
Console.WriteLine("Brak danych");
}
else
{
Console.WriteLine("Cześć " + otherName + ", mam na imię " + name);
}
}
}
class Program
{
static void Main()
{
}
}Kroki 10-14 · po tym etapie masz 23 z 34 kryteriów (pkt)
W podfolderze konsola w programie głównym aplikacji konsolowej należy sprawdzić działanie klasy poprzez, kolejno: Wyświetlenie komunikatu „Liczba zarejestrowanych osób to <licznik>”, gdzie <licznik> jest wartością pobraną z pola statycznego klasy.
Testy z części III piszemy w Main, jeden po drugim. Pierwszy: odczyt pola statycznego przez nazwę klasy - Osoba.InstanceCount; żaden obiekt jeszcze nie istnieje, więc wynik to 0 (R.4.1, R.4.2, R.2.3).
konsola/Program.cs C# zmienione: 1 linia class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
public void Greet(string otherName)
{
if (name == "")
{
Console.WriteLine("Brak danych");
}
else
{
Console.WriteLine("Cześć " + otherName + ", mam na imię " + name);
}
}
}
class Program
{
static void Main()
{
Console.WriteLine("Liczba zarejestrowanych osób to " + Osoba.InstanceCount);
}
}> konsola.exe Liczba zarejestrowanych osób to 0
Utworzenie obiektu za pomocą konstruktora bezparametrowego. Utworzenie obiektu za pomocą konstruktora z dwoma parametrami. Dane obiektu wprowadzane z klawiatury. Utworzenie obiektu za pomocą konstruktora kopiującego. Obiekt z wypełnionymi polami jest źródłem kopiowania danych.
Trzy obiekty, trzy konstruktory (R.4.4):
new Osoba() - bezparametrowy,new Osoba(id, name) - z danymi wczytanymi z klawiatury; int.Parse zamienia wpisany tekst na liczbę, a komunikaty „Podaj ...” mówią, czego program oczekuje (R.1.6),new Osoba(person) - kopia osoby z wypełnionymi polami, jak wymaga arkusz.Program pyta o dane, ale jeszcze nic nie wypisuje - powitania w następnym kroku.
konsola/Program.cs C# zmienione: 10 linii class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
public void Greet(string otherName)
{
if (name == "")
{
Console.WriteLine("Brak danych");
}
else
{
Console.WriteLine("Cześć " + otherName + ", mam na imię " + name);
}
}
}
class Program
{
static void Main()
{
Console.WriteLine("Liczba zarejestrowanych osób to " + Osoba.InstanceCount);
Osoba emptyPerson = new Osoba();
Console.Write("Podaj id: ");
int id = int.Parse(Console.ReadLine());
Console.Write("Podaj imię: ");
string name = Console.ReadLine();
Osoba person = new Osoba(id, name);
Osoba copiedPerson = new Osoba(person);
}
}> konsola.exe Liczba zarejestrowanych osób to 0 Podaj id: 7 Podaj imię: Anna
Wywołanie metody do wypisania imienia z parametrem wejściowym równym „Jan” dla wszystkich utworzonych obiektów.
Każdy obiekt wita Jana. Obiekt pusty wypisuje „Brak danych” (R.4.6), a osoba z klawiatury i jej kopia - „Cześć Jan, mam na imię Anna” (R.4.5). Dwa jednakowe powitania potwierdzają, że konstruktor kopiujący przepisał imię.
konsola/Program.cs C# zmienione: 4 linie class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
public void Greet(string otherName)
{
if (name == "")
{
Console.WriteLine("Brak danych");
}
else
{
Console.WriteLine("Cześć " + otherName + ", mam na imię " + name);
}
}
}
class Program
{
static void Main()
{
Console.WriteLine("Liczba zarejestrowanych osób to " + Osoba.InstanceCount);
Osoba emptyPerson = new Osoba();
Console.Write("Podaj id: ");
int id = int.Parse(Console.ReadLine());
Console.Write("Podaj imię: ");
string name = Console.ReadLine();
Osoba person = new Osoba(id, name);
Osoba copiedPerson = new Osoba(person);
emptyPerson.Greet("Jan");
person.Greet("Jan");
copiedPerson.Greet("Jan");
}
}> konsola.exe Liczba zarejestrowanych osób to 0 Podaj id: 7 Podaj imię: Anna Brak danych Cześć Jan, mam na imię Anna Cześć Jan, mam na imię Anna
Ponowne wyświetlenie komunikatu „Liczba zarejestrowanych osób to <licznik>”, gdzie <licznik> jest wartością pobraną z pola statycznego klasy.
Ten sam komunikat na końcu: licznik wynosi 3 - po jednym za każdy konstruktor (R.4.3). To najprostszy dowód, że każdy z trzech konstruktorów zwiększa licznik.
konsola/Program.cs C# zmienione: 2 linie class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
public void Greet(string otherName)
{
if (name == "")
{
Console.WriteLine("Brak danych");
}
else
{
Console.WriteLine("Cześć " + otherName + ", mam na imię " + name);
}
}
}
class Program
{
static void Main()
{
Console.WriteLine("Liczba zarejestrowanych osób to " + Osoba.InstanceCount);
Osoba emptyPerson = new Osoba();
Console.Write("Podaj id: ");
int id = int.Parse(Console.ReadLine());
Console.Write("Podaj imię: ");
string name = Console.ReadLine();
Osoba person = new Osoba(id, name);
Osoba copiedPerson = new Osoba(person);
emptyPerson.Greet("Jan");
person.Greet("Jan");
copiedPerson.Greet("Jan");
Console.WriteLine("Liczba zarejestrowanych osób to " + Osoba.InstanceCount);
}
}> konsola.exe Liczba zarejestrowanych osób to 0 Podaj id: 7 Podaj imię: Anna Brak danych Cześć Jan, mam na imię Anna Cześć Jan, mam na imię Anna Liczba zarejestrowanych osób to 3
Aplikacja konsolowa – dowolna liczba zrzutów nazwanych konsola1, konsola2 ... Kod aplikacji przygotuj do nagrania na płytę. W podfolderze konsola powinno znaleźć się archiwum całego projektu o nazwie konsola.zip, plik z kodem źródłowym klasy oraz plik uruchomieniowy, jeżeli istnieje.
Uruchamiamy program z Visual Studio, wpisujemy id i imię i robimy zrzut całego ekranu z wynikiem i środowiskiem - konsola1.png w folderze testy (R.1.7, R.2.9, R.4.7). W folderze konsola: konsola.zip z całym projektem, Program.cs (z klasą Osoba) i konsola.exe.
Wynik programu bez zmian - taki jak po kroku 13.
Kroki 15-26 · po tym etapie masz 33 z 34 kryteriów (pkt)
Wykonaj aplikację internetową typu front-end obsługującą zapisy na kursy z zastosowaniem dostępnego na stanowisku egzaminacyjnym frameworka Angular lub biblioteki React.
Wybieramy React. Projekt zakładamy w terminalu narzędziem Vite:
npm create vite@latest web -- --template react
cd web
npm install
Nazwa web od razu pasuje do archiwum web.zip. Vite tworzy src/main.jsx (wstawia komponent App do strony) i src/App.jsx z przykładowym licznikiem, który zastąpimy. npm run dev uruchamia serwer pod http://localhost:5173.
web/src/main.jsx JSX nowy plik import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)Wynik programu bez zmian - taki jak po kroku 13.
Zastosuj bibliotekę Bootstrap do zdefiniowania stylu formularza. React.js: To use Bootstrap add: import 'bootstrap/dist/css/bootstrap.css';
npm install bootstrap w folderze web, a potem import z tabeli 1 w main.jsx - w miejsce import './index.css', bo arkusz stylów z szablonu Vite wyśrodkowuje stronę i ustawia ciemne tło, a formularz ma wyglądać jak na obrazie 1b.
npm install bootstrap uruchomione poza folderem web instaluje pakiet gdzie indziej - import zgłosi błąd „Failed to resolve import”.
web/src/main.jsx JSX zmienione: 1 linia import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import 'bootstrap/dist/css/bootstrap.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)Wynik programu bez zmian - taki jak po kroku 13.
Aplikacja składa się z jednego komponentu. Danymi komponentu jest tablica z nazwami kursów, o elementach: "Programowanie w C#", "Angular dla początkujących", "Kurs Django". Dla uproszczenia tablica może być zdefiniowana jako pole komponentu.
Zastępujemy całą zawartość App.jsx. Komponent w React to funkcja zwracająca JSX - zapis podobny do HTML wewnątrz JavaScriptu. Tablica courses stoi w komponencie, tak jak dopuszcza arkusz (R.3.1). Zwracamy kontener Bootstrapa (container - marginesy po bokach, mt-3 - odstęp od góry); w JSX klasę CSS podajemy atrybutem className, bo class to słowo zarezerwowane JavaScriptu. Strona jest na razie pusta.
web/src/App.jsx JSX nowy plik function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
return (
<div className="container mt-3">
</div>
)
}
export default AppKomponent wyświetla: Nagłówek drugiego stopnia o treści: „Liczba kursów: <liczba>”, gdzie <liczba> oznacza wielkość tablicy z nazwami kursów.
W nawiasach klamrowych JSX wstawiamy wyrażenie JavaScriptu: courses.length to liczba elementów tablicy (R.3.5). Nie wpisujemy 3 na sztywno - arkusz zaznacza, że tablica może się zmienić, a nagłówek ma iść za nią.
web/src/App.jsx JSX zmienione: 1 linia function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
</div>
)
}
export default AppListę numerowaną generowaną automatycznie dla wszystkich elementów tablicy, niezależnie od jej wymiaru.
Lista numerowana to <ol> - numery 1, 2, 3 dopisuje przeglądarka. Elementy <li> tworzy metoda courses.map: dla każdego kursu zwraca jeden element listy, więc lista ma tyle pozycji, ile tablica (R.3.6). React wymaga dla elementów tworzonych w pętli atrybutu key o niepowtarzalnej wartości - tu nazwa kursu.
Trzy elementy <li> wpisane ręcznie nie zmienią się razem z tablicą - R.3.6 wymaga generowania listy z tablicy.
web/src/App.jsx JSX zmienione: 3 linie function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
</div>
)
}
export default AppFormularz składający się z: pola edycyjnego i jego etykiety o treści „Imię i nazwisko:”. Elementy formularza są formatowane zgodnie z obrazem 1a lub 1b za pomocą stylów biblioteki Bootstrap. Należy zastosować znaczące nazwy dla identyfikatorów pól formularza.
Wzór z tabeli 1: grupa form-group, w niej etykieta i pole z klasą form-control (pełna szerokość, obramowanie, zaokrąglenie). Etykietę wiążemy z polem: atrybut for etykiety = id pola - w React piszemy htmlFor zamiast for (R.3.2). Identyfikator znaczący, fullName, a nie przepisany z pomocy exampleInputEmail1 (R.3.3).
Klasa mb-3 dodaje odstęp pod grupą - w Bootstrapie 5, który instaluje npm, sama form-group (z Bootstrapa 4 w tabeli 1) już go nie daje.
web/src/App.jsx JSX zmienione: 6 linii function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
<form>
<div className="form-group mb-3">
<label htmlFor="fullName">Imię i nazwisko:</label>
<input type="text" className="form-control" id="fullName" />
</div>
</form>
</div>
)
}
export default AppEdycyjnego pola numerycznego i jego etykiety o treści „Numer kursu:”. Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information).
Pole numeryczne to <input type="number"> - przeglądarka przyjmuje w nim tylko liczbę i dokłada strzałki zmiany wartości. Ta sama budowa grupy co wyżej, identyfikator courseNumber.
web/src/App.jsx JSX zmienione: 4 linie function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
<form>
<div className="form-group mb-3">
<label htmlFor="fullName">Imię i nazwisko:</label>
<input type="text" className="form-control" id="fullName" />
</div>
<div className="form-group mb-3">
<label htmlFor="courseNumber">Numer kursu:</label>
<input type="number" className="form-control" id="courseNumber" />
</div>
</form>
</div>
)
}
export default AppPrzycisku „Zapisz do kursu”.
Przycisk z klasami btn btn-primary - niebieski jak na obrazie 1b (R.3.4). Typ submit: kliknięcie zatwierdza formularz, a to zdarzenie obsłużymy za chwilę.
web/src/App.jsx JSX zmienione: 1 linia function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
<form>
<div className="form-group mb-3">
<label htmlFor="fullName">Imię i nazwisko:</label>
<input type="text" className="form-control" id="fullName" />
</div>
<div className="form-group mb-3">
<label htmlFor="courseNumber">Numer kursu:</label>
<input type="number" className="form-control" id="courseNumber" />
</div>
<button type="submit" className="btn btn-primary">Zapisz do kursu</button>
</form>
</div>
)
}
export default AppAplikacja w stanie początkowym wyświetla puste pola formularza.
Żeby po kliknięciu przycisku odczytać, co wpisano, trzymamy wartości pól w stanie komponentu: useState('') zwraca bieżącą wartość i funkcję, która ją zmienia; pusty napis na starcie to puste pola z arkusza. Pole dostaje value ze stanu, a onChange przy każdym wpisanym znaku zapisuje do stanu event.target.value - to tzw. pole kontrolowane. useState importujemy z react na górze pliku.
web/src/App.jsx JSX zmienione: 8 linii import { useState } from 'react'
function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
const [fullName, setFullName] = useState('')
const [courseNumber, setCourseNumber] = useState('')
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
<form>
<div className="form-group mb-3">
<label htmlFor="fullName">Imię i nazwisko:</label>
<input type="text" className="form-control" id="fullName"
value={fullName} onChange={event => setFullName(event.target.value)} />
</div>
<div className="form-group mb-3">
<label htmlFor="courseNumber">Numer kursu:</label>
<input type="number" className="form-control" id="courseNumber"
value={courseNumber} onChange={event => setCourseNumber(event.target.value)} />
</div>
<button type="submit" className="btn btn-primary">Zapisz do kursu</button>
</form>
</div>
)
}
export default AppPo wybraniu przycisku formularza jest generowane zdarzenie zatwierdzenia formularza, które wyświetla w konsoli przeglądarki: Wartość wpisaną w pierwszym polu formularza.
Funkcję handleSubmit podpinamy pod zdarzenie onSubmit formularza (nie onClick przycisku) - tak brzmi arkusz i działa też zatwierdzenie Enterem (R.3.7). Pierwsza linia, event.preventDefault(), zatrzymuje domyślne zachowanie przeglądarki, czyli przeładowanie strony - bez niej wypis w konsoli zniknąłby razem ze stroną. Potem console.log wypisuje imię ze stanu.
Wpisz w podglądzie imię i kliknij „Zapisz do kursu” - napis pojawi się w panelu konsoli u dołu (na egzaminie: F12, zakładka Console).
Bez event.preventDefault() strona przeładowuje się po zatwierdzeniu i konsola zostaje wyczyszczona - na zrzucie nie ma wyniku.
web/src/App.jsx JSX zmienione: 6 linii import { useState } from 'react'
function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
const [fullName, setFullName] = useState('')
const [courseNumber, setCourseNumber] = useState('')
function handleSubmit(event) {
event.preventDefault()
console.log(fullName)
}
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
<form onSubmit={handleSubmit}>
<div className="form-group mb-3">
<label htmlFor="fullName">Imię i nazwisko:</label>
<input type="text" className="form-control" id="fullName"
value={fullName} onChange={event => setFullName(event.target.value)} />
</div>
<div className="form-group mb-3">
<label htmlFor="courseNumber">Numer kursu:</label>
<input type="number" className="form-control" id="courseNumber"
value={courseNumber} onChange={event => setCourseNumber(event.target.value)} />
</div>
<button type="submit" className="btn btn-primary">Zapisz do kursu</button>
</form>
</div>
)
}
export default AppNazwę kursu odpowiadającą numerowi wpisanemu w drugie pole formularza, gdy kurs o takim numerze istnieje. W przeciwnym wypadku wyświetla komunikat "Nieprawidłowy numer kursu".
Kursy numerujemy od 1 (jak na liście), a indeksy tablicy od 0 - stąd courseNumber - 1; odejmowanie zamienia też tekst z pola na liczbę. Kurs istnieje, gdy indeks mieści się w tablicy: od 0 do courses.length - 1. Wtedy wypisujemy jego nazwę, w przeciwnym razie komunikat z arkusza (R.3.9). Granicę bierzemy z courses.length, więc po dopisaniu kursu do tablicy kod dalej działa.
Sprawdź w podglądzie numery 1, 3, 4 i 0 (obraz 1b: Jan Twardowski, 1 - „Programowanie w C#”).
web/src/App.jsx JSX zmienione: 6 linii import { useState } from 'react'
function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
const [fullName, setFullName] = useState('')
const [courseNumber, setCourseNumber] = useState('')
function handleSubmit(event) {
event.preventDefault()
console.log(fullName)
const index = courseNumber - 1
if (index >= 0 && index < courses.length) {
console.log(courses[index])
} else {
console.log('Nieprawidłowy numer kursu')
}
}
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
<form onSubmit={handleSubmit}>
<div className="form-group mb-3">
<label htmlFor="fullName">Imię i nazwisko:</label>
<input type="text" className="form-control" id="fullName"
value={fullName} onChange={event => setFullName(event.target.value)} />
</div>
<div className="form-group mb-3">
<label htmlFor="courseNumber">Numer kursu:</label>
<input type="number" className="form-control" id="courseNumber"
value={courseNumber} onChange={event => setCourseNumber(event.target.value)} />
</div>
<button type="submit" className="btn btn-primary">Zapisz do kursu</button>
</form>
</div>
)
}
export default AppAplikacja web – dowolna liczba zrzutów nazwanych web1, web2 ... (np. stan początkowy, po wypełnieniu pól, po zatwierdzeniu konsola przeglądarki, gdy w drugim polu formularza jest prawidłowy numer oraz gdy jest nieprawidłowy numer kursu). Kod aplikacji przygotuj do nagrania na płytę. W podfolderze web powinno znaleźć się archiwum całego projektu o nazwie web.zip oraz pliki z kodem źródłowym, które były modyfikowane.
npm run dev, aplikacja w przeglądarce z otwartą konsolą (F12) i edytorem w tle. Zrzuty całego ekranu w folderze testy: web1 - stan początkowy, web2 - wypełnione pola, web3 - konsola po zatwierdzeniu z prawidłowym numerem, web4 - z nieprawidłowym (R.3.8, R.4.8).
W folderze web: web.zip z projektem bez folderu node_modules (setki megabajtów; odtwarza go npm install) oraz zmienione pliki App.jsx i main.jsx.
Podgląd strony bez zmian - taki jak po kroku 25.
Krok 27 · po tym etapie masz 34 z 34 kryteriów (pkt)
W edytorze tekstu pakietu biurowego utwórz plik z dokumentacją i nazwij go egzamin. Dokument powinien zawierać informacje: Nazwę systemu operacyjnego, na którym pracował zdający, Nazwy środowisk programistycznych, z których zdający korzystał na egzaminie, Nazwy języków programowania / frameworków / bibliotek użytych podczas tworzenia aplikacji. Zrzuty ekranu i dokument umieść w folderze o nazwie testy.
W Wordzie albo Writerze dokument egzamin w folderze testy: system, środowiska, języki i - ważne w tym arkuszu - nazwa biblioteki React (R.4.9). Plik obok to treść tekstowa dokumentu.
egzamin.txt Tekst nowy plik System operacyjny: Windows 11
Środowiska programistyczne: Visual Studio 2022 (aplikacja konsolowa), Visual Studio Code (aplikacja web)
Języki programowania: C# (aplikacja konsolowa), JavaScript (aplikacja web)
Biblioteki: React (aplikacja web), Bootstrap (style formularza), Vite (narzędzie do budowania projektu)Podgląd strony bez zmian - taki jak po kroku 25.
Kroki 28-29 · po tym etapie masz 34 z 34 kryteriów (pkt)
Program powinien być zapisany czytelnie, z zachowaniem zasad czystego formatowania kodu, należy stosować znaczące nazwy pól i metod.
Trzy poprawki:
int.TryParse w pętli - id wpisane jako „siedem” nie przerywa programu wyjątkiem FormatException, tylko prosi ponownie,string.IsNullOrWhiteSpace(name) - imię złożone z samych spacji też jest „brakiem danych”, a null nie wywraca porównania,$"Cześć {otherName}, ..." - czytelniej niż plusy.Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
konsola/Program.cs C# zmienione: 8 linii class Osoba
{
private int id;
private string name;
public static int InstanceCount = 0;
public Osoba()
{
id = 0;
name = "";
InstanceCount++;
}
public Osoba(int id, string name)
{
this.id = id;
this.name = name;
InstanceCount++;
}
public Osoba(Osoba other)
{
id = other.id;
name = other.name;
InstanceCount++;
}
public void Greet(string otherName)
{
if (string.IsNullOrWhiteSpace(name))
{
Console.WriteLine("Brak danych");
}
else
{
Console.WriteLine($"Cześć {otherName}, mam na imię {name}");
}
}
}
class Program
{
static void Main()
{
Console.WriteLine("Liczba zarejestrowanych osób to " + Osoba.InstanceCount);
Osoba emptyPerson = new Osoba();
Console.Write("Podaj id: ");
int id;
while (!int.TryParse(Console.ReadLine(), out id))
{
Console.Write("Id musi być liczbą całkowitą. Podaj id: ");
}
// int id = int.Parse(Console.ReadLine());
Console.Write("Podaj imię: ");
string name = Console.ReadLine();
Osoba person = new Osoba(id, name);
Osoba copiedPerson = new Osoba(person);
emptyPerson.Greet("Jan");
person.Greet("Jan");
copiedPerson.Greet("Jan");
Console.WriteLine("Liczba zarejestrowanych osób to " + Osoba.InstanceCount);
}
}> konsola.exe Liczba zarejestrowanych osób to 0 Podaj id: 7 siedem Id musi być liczbą całkowitą. Podaj id: Podaj imię: Anna Brak danych Cześć Jan, mam na imię Anna Cześć Jan, mam na imię Anna Liczba zarejestrowanych osób to 3
Nazwę kursu odpowiadającą numerowi wpisanemu w drugie pole formularza, gdy kurs o takim numerze istnieje. W przeciwnym wypadku wyświetla komunikat "Nieprawidłowy numer kursu".
Formularz HTML potrafi sam sprawdzić dane, zanim w ogóle wywoła onSubmit:
required - pole nie może zostać puste,min="1" i max={courses.length} - numer spoza listy kursów; granica idzie za tablicą. Ułamki pole type="number" odrzuca już samo, bo jego domyślny krok to 1.Przy złej wartości przeglądarka nie wysyła formularza, tylko pokazuje przy polu dymek z opisem błędu - użytkownik dowiaduje się o pomyłce od razu, a nie z konsoli. Sprawdzenie zakresu w handleSubmit zostaje: walidacja przeglądarki to wygoda, nie zabezpieczenie (wyłącza ją np. atrybut noValidate). Dodatkowo Number jawnie zamienia tekst z pola na liczbę, a metoda trim obcina spacje wokół imienia.
Uwaga: przy tej wersji numer 4 nie da już komunikatu „Nieprawidłowy numer kursu” z arkusza - dlatego na egzaminie zostajemy przy wersji wcześniejszej (klucz sprawdza właśnie ten komunikat).
web/src/App.jsx JSX zmienione: 4 linie import { useState } from 'react'
function App() {
const courses = ['Programowanie w C#', 'Angular dla początkujących', 'Kurs Django']
const [fullName, setFullName] = useState('')
const [courseNumber, setCourseNumber] = useState('')
function handleSubmit(event) {
event.preventDefault()
console.log(fullName.trim())
const index = Number(courseNumber) - 1
if (index >= 0 && index < courses.length) {
console.log(courses[index])
} else {
console.log('Nieprawidłowy numer kursu')
}
}
return (
<div className="container mt-3">
<h2>Liczba kursów: {courses.length}</h2>
<ol>
{courses.map(course => <li key={course}>{course}</li>)}
</ol>
<form onSubmit={handleSubmit}>
<div className="form-group mb-3">
<label htmlFor="fullName">Imię i nazwisko:</label>
<input type="text" className="form-control" id="fullName" required
value={fullName} onChange={event => setFullName(event.target.value)} />
</div>
<div className="form-group mb-3">
<label htmlFor="courseNumber">Numer kursu:</label>
<input type="number" className="form-control" id="courseNumber" required min="1" max={courses.length}
value={courseNumber} onChange={event => setCourseNumber(event.target.value)} />
</div>
<button type="submit" className="btn btn-primary">Zapisz do kursu</button>
</form>
</div>
)
}
export default AppKrok 30 · po tym etapie masz 34 z 34 kryteriów (pkt)
Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego powinny się znajdować podfoldery: konsola, testy, web. Po nagraniu płyty sprawdź poprawność nagrania.
Sprawdzamy zawartość przed nagraniem:
konsola.zip, Program.cs, konsola.exe,web.zip (bez node_modules), App.jsx, main.jsx,konsola1.png, web1.png - web4.png, egzamin.Nagrywamy, sprawdzamy odczyt płyty, opisujemy ją numerem zdającego.
Podgląd strony bez zmian - taki jak po kroku 29.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony). Treść arkusza i klucza oceniania pochodzi z CKE.