Modyfikacja i usuwanie informacji w aplikacji

Prócz dodawania nowych informacji do aplikacji internetowej dobrze by było mieć możliwość zmiany i usuwania treści już wprowadzonych. Tym zajmiemy się na tej lekcji.

Operacje CRUD

Zestaw czterech podstawowych działań na danych w aplikacji jest tak powszechny, że doczekał się swojego skrótowca: CRUD. Rozwija się to w:

Create - tworzenie nowych wpisów, w HTTP obsługujemy to żądaniami POST
Read - odczytywanie informacji, odpowiednik metody HTTP GET
Update - Modyfikacja zapisanych informacji, w HTTP służy do tego metoda PUT albo PATCH
Delete - Usuwanie informacji, które ma w HTTP jednoznaczny ekwiwalent DELETE

Niestety, póki nie zaczniemy pisać kodu JavaScript uruchamianego po stronie klienta, nie mamy dostępu do metod PUT i DELETE. Jedyne metody HTTP wspierane przez formularze HTML to GET i POST. Moim zdaniem jest to błąd ze strony twórców specyfikacji HTML, ale na chwilę obecną taki jest stan faktyczny.

Metody CRUD są na tyle podstawowym konceptem, że istnieje wiele narzędzi automatyzujących tworzenie takich interfejsów, ale przynajmniej raz warto przejść przez taką implementację krok po kroku. Więc dodajmy braującę operacje do naszej aplikacji.

Tworzenie nowych kategorii fiszek

Przeanalizuj zmiany wprowadzone do aplikacji przeglądając kod w folderze lekcja09/02_add_categories_feature w repozytrium z kodem do tych lekcji.

Analizowanie rozwoju kodu w VSCode

Visual Studio Code nie oferuje wygodnego interfejsu porównywania zawartości folderów, ale możemy wykorzystać w tym celu wizualizację historii repozytorium git.

Wykonajmy następującą sekwencję komend, która:

Pobierze najnowsze zmiany z repozytorium z kodem do naszych lekcji
Stworzy nowy folder lekcja09 w naszym katalogu domowym
Zmieni katalog roboczy na nowo utworzony folder
Zainicjalizuje nowe repozytorium git
Skopiuje w tym miejscu folder z kodem startowym
Stworzy commit git
Skopiuje kod z kolejną wersją kodu
Stworzy kolejny commit git

> cd ~/pzaw-code
> git pull
> mkdir ~/lekcja09
> cd ~/lekcja09
> git init
> cp -rT ~/pzaw-code/lekcja09/01_start .
> git add .
> git commit -m "initial commit"
> cp -rT ~/pzaw-code/lekcja09/02_* .
> git add .
> git commit -m "add categories feature"

Teraz otwierając widok “Source Control” w Visual Studio Code możemy obejrzeć zmiany, które wprowadził nowy commit.

Edycja istniejących kategorii

Przeanalizuj zmiany wprowadzone do aplikacji przeglądając kod w folderze lekcja09/03_edit_category_name w tym samym repozytorium.

Jeżeli korzystasz z powyższej metody do analizy zmian, to kolejny commit możesz stworzyć używając komend:

> cp -rT ~/pzaw-code/lekcja09/03_* .
> git add .
> git commit -m "edit category name"

Usuwanie i edycja istniejących fiszek

Na koniec przeanalizuj zmiany wprowadzone do aplikacji przeglądając kod w folderze lekcja09/04_edit_and_delete_card w tym samym repozytorium.

Usuwanie kategorii

Tym razem zostawiam to jako ćwiczenie dla czytelnika. Wzorując się na poprzednich zmianach zaproponuj swoje podejście do usuwania kategorii fiszek z aplikacji.