Web Pages and Modals

The most important step in creating most web applications is organizing their work with the database. How to get data from the database, how to display it on the user's screen, and how to manage and delete this data.

It is these questions that the new module of course is devoted to. In the third module, we created a database and designed models to record information about cities and countries. Now we will organize work with this database. We have to do the following:

• Create a table to output information from the database
• Learn how to add data to the database, as well as delete them
• Learn how modal windows work to create a user-friendly interface
• Understand how linked tables work

Pages

Let's start with the preparatory part. Our app is getting bigger, and it is cramped on one page. We need to create at least one more. Let's add it to the left menu.

Let's call the created page “World” and set the icon and a clear URL.

Modal windows

We need the ability to add new countries on the created page. To do this, we need a modal window in which we will enter the necessary data and a button that will open this modal window.

The modal window is a special component. It does not occupy any specific place on the page and, at the same time, combines the properties of the component (with settings specific to the components) and the new page (with its own canvas for adding other components). The most appropriate place to place a modal is at the area at the bottom of the page. It is highlighted in green, as is the modal component itself.

It is necessary to give it a suitable name, and on pressing the button, assign one simple action - displaying this modal window.

The next step is to enter the required data. We already did a similar operation in the previous module when we passed the value of X and Y. Now we need to do the same thing, except that the data type is different, and the input fields are in a modal window.

The database records the most basic information about countries. This is their name (String type) and general description (Text). These are the input fields you need to add.