INF.04 styczeń 2025 — klasa z tablicą i galeria zdjęć w Bootstrapie

# 1. Struktura folderow (PESEL = Twoj numer zdajacego)
mkdir PESEL
mkdir PESEL/konsolowa PESEL/webowa PESEL/dokumentacja

# 2. Rozpakuj materialy z pulpitu, haslo: K@tegorie)
#    W srodku sa zdjecia oraz plik dane.txt

# 3. Projekt konsolowy - wybierz JEDEN wariant
dotnet new console -o PESEL/konsolowa/konsola     # C#
# albo po prostu plik main.py                      # Python
# albo projekt w NetBeans / IntelliJ               # Java
# albo projekt w Code::Blocks / Visual Studio      # C++

# 4. Projekt webowy - wybierz JEDEN wariant
npx create-react-app egzamin                       # React.js
# albo
ng new egzamin --standalone --style=css            # Angular

# 5. Bootstrap (jest juz na stanowisku egzaminacyjnym)
npm install bootstrap

# 6. Zdjecia z pliki3.zip do folderu assets
#    React:  egzamin/public/assets/  albo  egzamin/src/assets/
#    Angular: egzamin/src/assets/  albo  egzamin/public/assets/

# Spakuj CALY folder projektu, nie same pliki zrodlowe
#   konsolowa -> konsola.zip
#   webowa    -> web.zip
#
# Przed spakowaniem weba usun node_modules:
#   to kilkaset megabajtow i kilkadziesiat tysiecy plikow,
#   pakowanie tego trwa dluzej niz zostalo Ci czasu.
#
# Po spakowaniu w podfolderze zostawiasz:
#   konsolowa/  konsola.zip + Program.cs + konsola.exe
#   webowa/     web.zip + App.jsx + App.css
#
# Ostatni krok: nagraj plyte, sprawdz nagranie,
# opisz plyte numerem zdajacego, zostaw w pudelku z arkuszem.

• Projekt webowy zakładasz na początku, bo instalacja pakietów potrafi zająć kilka minut. W tym czasie piszesz klasę konsolową — procesor i tak stoi bezczynnie.
• Nazwy podfolderów są narzucone przez arkusz: konsolowa, webowa, dokumentacja. Nie „konsola", nie „web", nie „docs".
• Nazwy archiwów też: konsola.zip i web.zip. Zauważ, że są niesymetryczne względem nazw folderów — to celowa pułapka na automatyczne uzupełnianie.
• Plik wykonywalny dołączasz „jeżeli istnieje". W Pythonie nie istnieje i nikt go nie oczekuje. W C# to plik z folderu bin/Debug.

using System;

namespace AplikacjaKonsolowa
{
  class Tablica
  {
      // Oba pola prywatne: dostepne tylko w tej klasie
      // i NIEdostepne dla klas potomnych
      private int[] tablica;
      private int liczbaElementow;

      public Tablica(int rozmiar)
      {
          liczbaElementow = rozmiar;
          tablica = new int[rozmiar];
          Random generator = new Random();
          for (int i = 0; i < liczbaElementow; i++)
          {
              // Next(1, 1001) losuje od 1 do 1000 wlacznie
              tablica[i] = generator.Next(1, 1001);
          }
      }

      public void Wyswietl()
      {
          for (int i = 0; i < liczbaElementow; i++)
          {
              Console.WriteLine(i + ": " + tablica[i]);
          }
      }

      /************************************************
      nazwa metody:         Szukaj
      opis metody:          wyszukuje pierwsze wystapienie
                            podanej wartosci w tablicy
      parametry:            szukanaWartosc - liczba calkowita,
                            ktorej szukamy w tablicy
      zwracany typ i opis:  int - indeks pierwszego wystapienia
                            szukanej wartosci lub -1, gdy
                            wartosci nie ma w tablicy
      autor:                PESEL
      ************************************************/
      public int Szukaj(int szukanaWartosc)
      {
          for (int i = 0; i < liczbaElementow; i++)
          {
              if (tablica[i] == szukanaWartosc)
              {
                  return i;
              }
          }
          return -1;
      }

      public int WyswietlNieparzyste()
      {
          int licznik = 0;
          for (int i = 0; i < liczbaElementow; i++)
          {
              if (tablica[i] % 2 != 0)
              {
                  Console.WriteLine(tablica[i]);
                  licznik++;
              }
          }
          return licznik;
      }

      public double Srednia()
      {
          double suma = 0;
          for (int i = 0; i < liczbaElementow; i++)
          {
              suma += tablica[i];
          }
          if (liczbaElementow == 0)
          {
              return 0;
          }
          return suma / liczbaElementow;
      }
  }

  class Program
  {
      static void Main(string[] args)
      {
          Tablica tab = new Tablica(25);

          Console.WriteLine("Elementy tablicy:");
          tab.Wyswietl();

          Console.WriteLine();
          Console.Write("Podaj szukana wartosc: ");
          int szukana = int.Parse(Console.ReadLine());
          int indeks = tab.Szukaj(szukana);
          if (indeks != -1)
          {
              Console.WriteLine("Znaleziono pod indeksem: " + indeks);
          }
          // gdy indeks == -1 program celowo NIC nie wyswietla

          Console.WriteLine();
          Console.WriteLine("Wartosci nieparzyste:");
          int ileNieparzystych = tab.WyswietlNieparzyste();
          Console.WriteLine("Liczba wartosci nieparzystych: " + ileNieparzystych);

          Console.WriteLine();
          Console.WriteLine("Srednia arytmetyczna: " + tab.Srednia());

          Console.ReadKey();
      }
  }
}

import random


class Tablica:
  def __init__(self, rozmiar):
      # Podwojny podkreslnik = name mangling.
      # Pole jest niedostepne poza klasa i w klasach potomnych.
      self.__liczba_elementow = rozmiar
      self.__tablica = []
      for i in range(rozmiar):
          self.__tablica.append(random.randint(1, 1000))

  def wyswietl(self):
      for i in range(self.__liczba_elementow):
          print(str(i) + ": " + str(self.__tablica[i]))

  # ************************************************
  # nazwa metody:         szukaj
  # opis metody:          wyszukuje pierwsze wystapienie
  #                       podanej wartosci w tablicy
  # parametry:            szukana_wartosc - liczba calkowita,
  #                       ktorej szukamy w tablicy
  # zwracany typ i opis:  int - indeks pierwszego wystapienia
  #                       lub -1, gdy wartosci nie ma
  # autor:                PESEL
  # ************************************************
  def szukaj(self, szukana_wartosc):
      for i in range(self.__liczba_elementow):
          if self.__tablica[i] == szukana_wartosc:
              return i
      return -1

  def wyswietl_nieparzyste(self):
      licznik = 0
      for i in range(self.__liczba_elementow):
          if self.__tablica[i] % 2 != 0:
              print(self.__tablica[i])
              licznik += 1
      return licznik

  def srednia(self):
      if self.__liczba_elementow == 0:
          return 0
      suma = 0
      for i in range(self.__liczba_elementow):
          suma += self.__tablica[i]
      return suma / self.__liczba_elementow


def main():
  tab = Tablica(25)

  print("Elementy tablicy:")
  tab.wyswietl()

  print()
  szukana = int(input("Podaj szukana wartosc: "))
  indeks = tab.szukaj(szukana)
  if indeks != -1:
      print("Znaleziono pod indeksem: " + str(indeks))
  # gdy indeks == -1 program celowo nic nie wyswietla

  print()
  print("Wartosci nieparzyste:")
  ile = tab.wyswietl_nieparzyste()
  print("Liczba wartosci nieparzystych: " + str(ile))

  print()
  print("Srednia arytmetyczna: " + str(tab.srednia()))


main()

• W Pythonie random.randint(1, 1000) ma obie granice włączone — inaczej niż Next w C#. To najczęstszy błąd przy przepisywaniu rozwiązania między językami.
• Jeden podkreślnik (_pole) to tylko konwencja, dziedziczy się normalnie. Arkusz żąda niedostępności w klasach potomnych, więc idziesz w dwa podkreślniki.
• W Javie i C++ odpowiednikiem jest private. W C++ pamiętaj o zwolnieniu pamięci, jeśli alokujesz tablicę przez new.
• Średnia w Pythonie 3 wychodzi zmiennoprzecinkowa automatycznie — operator / nigdy nie ucina.

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';

// Trzy kategorie zgodnie z opisem pola category w dane.txt
const kategorie = [
{ numer: 1, etykieta: 'Kwiaty' },
{ numer: 2, etykieta: 'Zwierzeta' },
{ numer: 3, etykieta: 'Samochody' }
];

function App() {
// Tablica obiektow przepisana z pliku dane.txt
const [zdjecia, setZdjecia] = useState([
  { id: 1, alt: 'roza', filename: 'kwiat1.jpg', category: 1, downloads: 12 },
  { id: 2, alt: 'tulipan', filename: 'kwiat2.jpg', category: 1, downloads: 5 },
  { id: 3, alt: 'kot', filename: 'zwierze1.jpg', category: 2, downloads: 8 },
  { id: 4, alt: 'pies', filename: 'zwierze2.jpg', category: 2, downloads: 21 },
  { id: 5, alt: 'sedan', filename: 'auto1.jpg', category: 3, downloads: 3 },
  { id: 6, alt: 'kombi', filename: 'auto2.jpg', category: 3, downloads: 17 }
]);

// W stanie poczatkowym wszystkie switche sa wlaczone
const [wlaczoneKategorie, setWlaczoneKategorie] = useState([1, 2, 3]);

function przelaczKategorie(numer) {
  setWlaczoneKategorie(function (poprzednie) {
    if (poprzednie.includes(numer)) {
      return poprzednie.filter(function (k) { return k !== numer; });
    }
    return poprzednie.concat([numer]);
  });
}

function pobierz(idZdjecia) {
  setZdjecia(function (poprzednie) {
    return poprzednie.map(function (zdjecie) {
      if (zdjecie.id === idZdjecia) {
        return Object.assign({}, zdjecie, { downloads: zdjecie.downloads + 1 });
      }
      return zdjecie;
    });
  });
}

const styleZdjecia = { margin: '5px', borderRadius: '10px' };

return (
  <div className="container">
    <h1>Kategorie zdjec</h1>

    <div className="mb-3">
      {kategorie.map(function (kategoria) {
        return (
          <div className="form-check form-switch form-check-inline"
               key={kategoria.numer}>
            <input className="form-check-input"
                   type="checkbox"
                   id={'switch' + kategoria.numer}
                   checked={wlaczoneKategorie.includes(kategoria.numer)}
                   onChange={function () { przelaczKategorie(kategoria.numer); }} />
            <label className="form-check-label"
                   htmlFor={'switch' + kategoria.numer}>
              {kategoria.etykieta}
            </label>
          </div>
        );
      })}
    </div>

    <div className="d-flex flex-wrap">
      {zdjecia
        .filter(function (zdjecie) {
          return wlaczoneKategorie.includes(zdjecie.category);
        })
        .map(function (zdjecie) {
          return (
            <div className="text-center" key={zdjecie.id}>
              <img src={'assets/' + zdjecie.filename}
                   alt={zdjecie.alt}
                   width="220"
                   style={styleZdjecia} />
              <h4>Pobrania: {zdjecie.downloads}</h4>
              <button type="button"
                      className="btn btn-success"
                      onClick={function () { pobierz(zdjecie.id); }}>
                Pobierz
              </button>
            </div>
          );
        })}
    </div>
  </div>
);
}

export default App;

• Stan w tablicy, nie w licznikach obok. Arkusz pisze: „liczba pobrań jest zapisywana w tablicy z obiektami zdjęć". Trzymanie osobnego licznika w drugim useState formalnie nie spełnia wymagania, choć wygląda tak samo.
• Filtrowanie przez tablicę włączonych kategorii, a nie przez trzy osobne zmienne logiczne. Dzięki temu dodanie czwartej kategorii nie wymaga zmiany kodu — arkusz żąda uniwersalności.
• Pętla i warunek to tutaj map plus filter. Nie wolno wypisać sześciu bloków ręcznie — to natychmiastowa strata punktu za „zastosowano pętle oraz warunki".
• d-flex flex-wrap realizuje „bloki wyświetlone jeden obok drugiego" i zawija je, gdy zabraknie miejsca w wierszu.
• Marginesy 5 px i zaokrąglone rogi są narzucone przez arkusz — możesz je dać stylem wbudowanym albo klasą w App.css, byle były na zdjęciu, a nie na całym bloku.

/* src/styles.css */
@import "~bootstrap/dist/css/bootstrap.css";

/* jesli tylda nie zadziala w nowszej wersji Angulara: */
/* @import "bootstrap/dist/css/bootstrap.css"; */

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './app.component.html'
})
export class AppComponent {
kategorie = [
  { numer: 1, etykieta: 'Kwiaty', wlaczona: true },
  { numer: 2, etykieta: 'Zwierzeta', wlaczona: true },
  { numer: 3, etykieta: 'Samochody', wlaczona: true }
];

// Tablica obiektow przepisana z pliku dane.txt
zdjecia = [
  { id: 1, alt: 'roza', filename: 'kwiat1.jpg', category: 1, downloads: 12 },
  { id: 2, alt: 'tulipan', filename: 'kwiat2.jpg', category: 1, downloads: 5 },
  { id: 3, alt: 'kot', filename: 'zwierze1.jpg', category: 2, downloads: 8 },
  { id: 4, alt: 'pies', filename: 'zwierze2.jpg', category: 2, downloads: 21 },
  { id: 5, alt: 'sedan', filename: 'auto1.jpg', category: 3, downloads: 3 },
  { id: 6, alt: 'kombi', filename: 'auto2.jpg', category: 3, downloads: 17 }
];

czyWidoczne(numerKategorii: number): boolean {
  const kategoria = this.kategorie.find(function (k) {
    return k.numer === numerKategorii;
  });
  return kategoria ? kategoria.wlaczona : false;
}

pobierz(zdjecie: any): void {
  zdjecie.downloads = zdjecie.downloads + 1;
}
}

<div class="container">
<h1>Kategorie zdjec</h1>

<div class="mb-3">
  <div class="form-check form-switch form-check-inline"
       *ngFor="let kategoria of kategorie">
    <input class="form-check-input"
           type="checkbox"
           id="switch{{kategoria.numer}}"
           [(ngModel)]="kategoria.wlaczona">
    <label class="form-check-label"
           for="switch{{kategoria.numer}}">
      {{kategoria.etykieta}}
    </label>
  </div>
</div>

<div class="d-flex flex-wrap">
  <div class="text-center"
       *ngFor="let zdjecie of zdjecia">
    <div *ngIf="czyWidoczne(zdjecie.category)">
      <img [src]="'assets/' + zdjecie.filename"
           [alt]="zdjecie.alt"
           width="220"
           style="margin: 5px; border-radius: 10px;">
      <h4>Pobrania: {{zdjecie.downloads}}</h4>
      <button type="button"
              class="btn btn-success"
              (click)="pobierz(zdjecie)">
        Pobierz
      </button>
    </div>
  </div>
</div>
</div>

• ngModel nie zadziała bez zaimportowanego FormsModule. Błąd „Can't bind to ngModel" to najczęstsze zatrzymanie na tym arkuszu — w projekcie modułowym import idzie do app.module.ts, w standalone do tablicy imports komponentu.
• *ngFor i *ngIf nie mogą stać na tym samym elemencie. Dlatego warunek siedzi w zagnieżdżonym div. W Angularze 17+ możesz zamiast tego użyć składni @for i @if.
• W Angularze mutacja zdjecie.downloads = zdjecie.downloads + 1 jest w porządku — wykrywanie zmian złapie ją samo. To odwrotność zasady z Reacta i dlatego przepisywanie rozwiązania między frameworkami bez zrozumienia kończy się źle.

**********************************************
nazwa metody:         <nazwa>
opis metody:          <krotki opis, co robi metoda>
parametry:            <nazwa i opis parametru1, lub "brak">
                    <nazwa i opis parametru2>
                    ...
zwracany typ i opis:  <nazwa typu i opis co jest zwracane lub "brak">
autor:                <numer zdajacego>
**********************************************

/***********************************************
nazwa metody:         WyswietlNieparzyste
opis metody:          przeglada tablice i wypisuje na konsoli
                    wszystkie wartosci nieparzyste, kazda
                    w osobnym wierszu
parametry:            brak
zwracany typ i opis:  int - liczba znalezionych i wyswietlonych
                    wartosci nieparzystych
autor:                PESEL
***********************************************/
public int WyswietlNieparzyste()
{
  // ...
}

# **********************************************
# nazwa metody:         wyswietl_nieparzyste
# opis metody:          przeglada tablice i wypisuje na konsoli
#                       wszystkie wartosci nieparzyste
# parametry:            brak
# zwracany typ i opis:  int - liczba znalezionych i wyswietlonych
#                       wartosci nieparzystych
# autor:                PESEL
# **********************************************
def wyswietl_nieparzyste(self):
  pass

DOKUMENTACJA APLIKACJI
Numer zdajacego: PESEL

1. System operacyjny
 Windows 10 Education 64-bit
 (albo: Windows 11 Pro / Ubuntu 22.04 LTS)

2. Srodowiska programistyczne
 - aplikacja konsolowa: Microsoft Visual Studio 2022 Community
 - aplikacja webowa:     Visual Studio Code 1.85
 - przegladarka testowa: Mozilla Firefox 121

3. Jezyki programowania i technologie
 - aplikacja konsolowa: C# (.NET 8)
 - aplikacja webowa:     JavaScript, HTML, CSS
 - biblioteka/framework: React.js 18, Bootstrap 5

4. Wykaz zrzutow ekranu
 konsola1 - kompilacja i wyswietlenie elementow tablicy
 konsola2 - wyszukiwanie, liczby nieparzyste i srednia
 web1     - stan poczatkowy, wszystkie switche wlaczone
 web2     - odznaczona kategoria Zwierzeta
 web3     - wzrost liczby pobran po kliknieciu Pobierz

1. Ustaw okna tak, żeby na jednym ekranie było widać i wynik działania, i środowisko z projektem. Arkusz żąda obu rzeczy na jednym zrzucie.
2. Naciśnij klawisz zrzutu całego ekranu — nie narzędzie wycinania. Kadrowany zrzut nie spełnia warunku „cały obszar ekranu monitora z widocznym paskiem zadań".
3. Zapisz od razu do folderu dokumentacja pod właściwą nazwą. Przenoszenie i przemianowywanie na końcu to strata czasu i okazja do pomyłki.
4. Web wymaga co najmniej trzech zrzutów, bo arkusz wymienia trzy sytuacje: stan początkowy, różne kombinacje switchy, działanie przycisku „Pobierz". Zasada ogólna z arkusza: tyle zrzutów, ile interakcji podejmuje aplikacja.