-

Binnen 4 stappen een login pagina!

Posted by Bas Hendriks on Dec 4, 2018 8:00:00 AM
Bas Hendriks



BB1
De UI builder maakt gebruik van een grid system framework om u flexibel aanpasbare pagina's te laten maken met exact het uiterlijk en het gevoel wat u wilt creëren. Login pagina's, de toegangspoort tot uw CMS, is een geweldige plek om een deel van die aanpasbaarheid uit te oefenen door zelfs de kleine details van uw toepassing een uiterlijk te geven in uw huisstijl. Bekijk deze handleiding om door te nemen hoe eenvoudig het is om een login pagina te maken zonder enkele codering!

 

Stap 1: Maak een UI builder pagina aan
Zodra u in de UI Builder bent, begint u met een lege pagina, zonder extra lay-out.
U kunt UI-pagina's gebruiken voor allerlei soorten paginafuncties, niet alleen voor inlogpagina's!

ezgif.com-gif-maker



 

 

 

 

 

 

 

 

 

Nadat de pagina is geopend, voegt u een raster toe aan de paginacontainer. De opties van het raster worden aan de linkerkant van uw scherm geopend. U kunt het aantal rijen en kolommen instellen en de breedte aanpassen om uw eigen lay-out aan te passen. U kunt ook de reactiviteit van uw pagina regelen door geschaalde breedten van de kolommen in te stellen voor verschillende apparaat weergaven.

Stap 2: Ontwerp uw pagina
Omdat we graag willen dat onze pagina's er goed uitzien, maken we het aanmeldingsformulier in een venster. Voeg een paneel toe aan uw UI-pagina door het in een kolom neer te zetten. Als u ons formulier in het deelvenster wilt bouwen, moeten we een nieuw raster toevoegen.

ezgif.com-gif-maker (1)

 

 

 

 

 

 

 

Slim werken: om meer rijen te maken, klik je op het duplicaat naast het plusteken om het rasteronderdeel te dupliceren en het nog sneller te ontwikkelen. Heel handig!

Hier kunt u uw eigen huisstijl afbeeldingen koppelen aan uw rasterkolommen voor een aangepast uiterlijk. Upload een afbeelding, selecteer een afbeelding uit uw bestanden of plak de URL van een afbeelding om deze aan de pagina toe te voegen. Pas de positie van uw afbeelding aan zoals u dat wilt.

ezgif.com-gif-maker (2)


Stap 3: Maak de login post aan
Voordat we verder kunnen gaan op de UI builder, moeten we de POST-pagina instellen door een aangepaste HTML-pagina te maken met een POST-methode.
ezgif.com-gif-maker (3)

Op dit moment heeft u de twee invoervariabelen nodig die gebruikers kunnen gebruiken om zich aan te melden bij uw app: een e-mailadres en een wachtwoord. Maak deze twee tekst invoervariabelen.

Met deze twee variabelen kunt u de vereiste actie maken waarmee de gebruiker wordt aangemeld.
Als u klaar bent, kunt u de actie maken om een gebruiker aan te melden met de opgegeven inloggegevens.

Het volgende is om de gebruiker door te sturen naar het eindpunt van uw keuze.

ezgif.com-gif-maker (4)


Stap 4 : Maak een formulier op uw pagina
De laatste stap is om het login formulier op uw UI-pagina te maken. Dit doen we door twee ingangen toe te voegen aan een van de kolommen, een voor de e-mail van de gebruiker en een andere voor het wachtwoord. Open de instellingen van elke ingang om ze dezelfde naam te geven als de corresponderende invoervariabelen op uw POST-pagina.

Plaats extra rasters op uw pagina om de structuur te maken om uw formulier volledig intact te houden. Hiermee kunt u ervoor zorgen dat de reactiesnelheid van uw pagina correct wordt aangepast aan verschillende apparaat weergaven.

ezgif.com-gif-maker (5)


Open ten slotte de instellingen van uw formulier en selecteer uw POST-eindpunt in de vervolgkeuzelijst & thats it!
U hebt nu een werkende login pagina. 


Ook interesse gekregen om een login pagina te ontwikkelen zonder enkele codering?
Plan met ons een gepersonaliseerde demo om het uit te proberen!

Plan een demo

 

 

Subscribe Here!