Ja wykonać zadanie

Projekt nosi nazwę „GaleriaWebowa” i prezentuje zdjęcia w trzech kategoriach: Kwiaty, Zwierzęta, Samochody. Zdjęcia można filtrować oraz zwiększać licznik pobrań.

Krok 1 – Konfiguracja projektu

1. Uruchom Visual Studio 2022.
2. Wybierz szablon: „ASP.NET Core with Angular”.
3. Nazwij projekt: GaleriaWebowa.
4. W konfiguracji dodatkowej wybierz .NET 8.0, brak uwierzytelniania, odznacz kontenery, Aspire i OpenAPI.
5. Kliknij „Utwórz”.

Krok 2 – Folder ze zdjęciami

Wypakuj plik `pliki3.zip` i przenieś wszystkie obrazy JPG do folderu: ClientApp/src/assets/

Krok 3 – Zawartość angular.json

„assets”: [
  „src/assets”,
  „src/favicon.ico”
],

Krok 4 – app.component.ts

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’,
  styleUrls: [’./app.component.css’]
})
export class AppComponent {
  title = 'Kategorie zdjęć’;

  categories = {
    kwiaty: true,
    zwierzeta: true,
    samochody: true
  };

  photos = [
    { id: 1, alt: 'Mak’, filename: 'obraz1.jpg’, category: 1, downloads: 35 },
    { id: 2, alt: 'Bukiet’, filename: 'obraz2.jpg’, category: 1, downloads: 43 },
    { id: 3, alt: 'Dalmatyńczyk’, filename: 'obraz3.jpg’, category: 2, downloads: 2 },
    { id: 4, alt: 'Świnka morska’, filename: 'obraz4.jpg’, category: 2, downloads: 53 },
    { id: 5, alt: 'Rottweiler’, filename: 'obraz5.jpg’, category: 2, downloads: 43 },
    { id: 6, alt: 'Audi’, filename: 'obraz10.jpg’, category: 3, downloads: 11 },
    { id: 7, alt: 'Garbus’, filename: 'obraz11.jpg’, category: 3, downloads: 321 }
  ];

  get filteredPhotos() {
    return this.photos.filter(photo => {
      return (
        (photo.category === 1 && this.categories.kwiaty) ||
        (photo.category === 2 && this.categories.zwierzeta) ||
        (photo.category === 3 && this.categories.samochody)
      );
    });
  }

  download(photo: any) {
    photo.downloads++;
  }
}

Krok 5 – app.component.html

<h1>{{ title }}</h1>

<label><input type=”checkbox” [(ngModel)]=”categories.kwiaty”> Kwiaty</label>
<label><input type=”checkbox” [(ngModel)]=”categories.zwierzeta”> Zwierzęta</label>
<label><input type=”checkbox” [(ngModel)]=”categories.samochody”> Samochody</label>

<div style=”display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;”>
  <div *ngFor=”let photo of filteredPhotos” style=”border: 1px solid #ccc; padding: 10px; border-radius: 10px; width: 250px;”>
    <img [src]=”’assets/’ + photo.filename” [alt]=”photo.alt” style=”width: 100%; border-radius: 10px;”>
    <h4>Pobrań: {{ photo.downloads }}</h4>
    <button (click)=”download(photo)”>Pobierz</button>
  </div>
</div>

Krok 6 – app.component.css

input[type=”checkbox”] {
  margin: 10px;
}
button {
  background-color: #2e7d32;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  background-color: #1b5e20;
}

Krok 7 – main.ts

import { bootstrapApplication } from '@angular/platform-browser’;
import { AppComponent } from ’./app/app.component’;

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

Krok 8 – Uruchomienie aplikacji

1. W terminalu w folderze ClientApp wpisz: npm install
2. Następnie: ng serve
3. Otwórz w przeglądarce adres: