Веб страницы и модальные окна

Важнейшим этапом создания большинства веб-приложений является организация их работы с базой данных. Как получить данные из базы, как отобразить их на экране пользователя, как этими данными управлять и удалять их.

Именно этим вопросам и посвящен очередной модуль обучения. В третьем модуле мы создавали базу данных, проектировали модели для записи информации о городах и странах. Сейчас организуем работу с данной базой данных. Нам предстоит сделать следующее:

• Создать таблицу для вывода информации из базы данных
• Научиться добавлять данные в базу, а также удалять их
• Изучить работу модальных окон для создания удобного интерфейса пользователя
• Разобраться с особенностями работы связанных таблиц

Страницы

Но начнем с подготовительной части. Наше приложение становится больше и ему тесно на одной странице. Необходимо создать еще, как минимум, одну. Добавим ее к левому меню.

Назовем созданную страницу “World”, установим симпатичную иконку и понятный URL.

Модальные окна

На созданной странице нам нужна сама возможность добавления новых стран. Для этого понадобится модальное окно, в котором будем производить ввод нужных данных, а также кнопка, которая будет это модальное окно открывать.

Модальное окно - особенный компонент. Оно не занимает какое-то определенное место на странице и при этом совмещает в себе свойства компонента, с характерными для компонентов настройками, и новой страницы, со своим собственным холстом для добавления других компонентов. Наиболее подходящим местом для размещения модального окна является область в нижней части страницы. Она выделена зеленым цветом, как и сам компонент модального окна.

Необходимо дать ему подходящее название, а на нажатие кнопки назначить одно простое действие - отображение данного модального окна.

Следующий шаг - ввод необходимых данных. Мы уже делали подобную операцию в предыдущем модуле, когда передавали значение X и Y. Сейчас необходимо проделать примерно то же самое, за исключением того, что отличается тип данных, а поля для ввода находятся в модальном окне.

В базу данных записывается самая базовая информация о странах. Это их название (тип String) и общее описание (Text). Именно такие поля ввода и нужно добавить.