Strony internetowe i modale

Najważniejszym krokiem przy tworzeniu większości aplikacji internetowych jest organizacja ich pracy z bazą danych. Jak pobierać dane z bazy, jak je wyświetlać na ekranie użytkownika oraz jak zarządzać i usuwać te dane.

To właśnie tym zagadnieniom poświęcony jest nowy moduł kursu. W trzecim module stworzyliśmy bazę danych i zaprojektowaliśmy modele do zapisu informacji o miastach i krajach. Teraz będziemy organizować pracę z tą bazą danych. Musimy wykonać następujące czynności:

• Utworzyć tabelę do wyprowadzania informacji z bazy danych
• Nauczyć się dodawać dane do bazy danych, a także je usuwać
• Nauczyć się, jak działają okna modalne, aby stworzyć przyjazny dla użytkownika interfejs
• Zrozumieć, jak działają tabele połączone

Strony

Zacznijmy od części przygotowawczej. Nasza aplikacja staje się coraz większa, a na jednej stronie jest już ciasno. Musimy stworzyć przynajmniej jeszcze jedną. Dodajmy ją do lewego menu.

Nazwijmy stworzoną stronę "World" i ustawmy ikonę oraz czytelny adres URL.

Okna modalne

Potrzebujemy możliwości dodawania nowych krajów na utworzonej stronie. W tym celu potrzebujemy okna modalnego, w którym wprowadzimy niezbędne dane oraz przycisku, który otworzy to okno modalne.

Okno modalne jest specjalnym komponentem. Nie zajmuje żadnego konkretnego miejsca na stronie, a jednocześnie łączy w sobie właściwości komponentu (z ustawieniami właściwymi dla komponentów) i nowej strony (z własną kanwą do dodawania innych komponentów). Najbardziej odpowiednim miejscem do umieszczenia modalu jest obszar u dołu strony. Jest on podświetlony na zielono, podobnie jak sam komponent modalny.

Należy nadać mu odpowiednią nazwę, a po naciśnięciu przycisku przypisać jedną prostą akcję - wyświetlenie tego okna modalnego.

Kolejnym krokiem jest wprowadzenie wymaganych danych. Podobną operację wykonaliśmy już w poprzednim module, gdy przekazywaliśmy wartości X i Y. Teraz musimy zrobić to samo, tyle że typ danych jest inny, a pola wejściowe znajdują się w oknie modalnym.

W bazie danych zapisane są najbardziej podstawowe informacje o krajach. Jest to ich nazwa (String typ) i ogólny opis (Text). To są pola wejściowe, które musisz dodać.