Webpagina's en Modals
Hoe nieuwe pagina's en modale vensters maken in webapplicaties
De belangrijkste stap bij het maken van de meeste webapplicaties is het organiseren van hun werk met de database. Hoe haal je gegevens uit de database, hoe toon je die op het scherm van de gebruiker, en hoe beheer en verwijder je die gegevens.
Aan deze vragen is de nieuwe module gewijd. In de derde module hebben we een database gemaakt en modellen ontworpen om informatie over steden en landen vast te leggen. Nu gaan we het werk met deze database organiseren. We moeten het volgende doen:
- Een tabel maken om informatie uit de database uit te voeren
- Leren hoe je gegevens toevoegt aan de database, en ze ook verwijdert
- Leren hoe modale vensters werken om een gebruikersvriendelijke interface te creëren
- Begrijpen hoe gekoppelde tabellen werken
Pagina's
Laten we beginnen met het voorbereidende deel. Onze app wordt groter, en het wordt krap op één pagina. We moeten er nog minstens één maken. Laten we die toevoegen aan het linker menu.
We noemen de gemaakte pagina "World" en stellen het icoon en een duidelijke URL in.
Modale vensters
We moeten nieuwe landen kunnen toevoegen aan de aangemaakte pagina. Daarvoor hebben we een modaal venster nodig waarin we de nodige gegevens invoeren en een knop die dit modale venster opent.
Het modale venster is een speciale component. Het neemt geen specifieke plaats in op de pagina en combineert tegelijkertijd de eigenschappen van de component (met specifieke instellingen voor de componenten) en de nieuwe pagina (met een eigen canvas voor het toevoegen van andere componenten). De meest geschikte plaats om een modal te plaatsen is het gebied onderaan de pagina. Het is groen gemarkeerd, evenals de modale component zelf.
U moet het een passende naam geven, en bij het indrukken van de knop een eenvoudige actie toewijzen - het weergeven van dit modale venster.
De volgende stap is het invoeren van de vereiste gegevens. In de vorige module deden we al een soortgelijke handeling, toen we de waarde van X en Y doorgaven. Nu moeten we hetzelfde doen, behalve dat het gegevenstype anders is, en de invoervelden in een modaal venster staan.
De database registreert de meest elementaire informatie over landen. Dit is hun naam (String type) en algemene beschrijving (Text). Dit zijn de invoervelden die je moet toevoegen.
