Een Login-box voor FlexWeb Gastouder

Een van de mogelijkheden om een klant via de bedrijfswebsite van uw opvangorganisatie in te laten loggen bij FlexWeb Gastouder, is door een zogenoemde login-box op te nemen in de desbetreffende html-pagina.

Een voorbeeld van een login-box zonder opmaak:

En een voorbeeld met opmaak (gebruik van css):

In de login-box vult de gastouder zijn gebruikersnaam (e-mailadres) en wachtwoord in. De login-procedure van flexweb is op deze wijze helemaal geïntegreerd in de website van uw opvangorganisatie.

Als u wilt dat klanten via een login-box kunnen inloggen op flexweb, moet u de desbetreffende webpagina van de website van uw organisatie aanpassen:

1. u moet de code van de loginbox (<form>...</form>) toevoegen aan de html-code van de webpagina;
2. u moet bij het attribuut action van de form-tag het webadres van de inlogprocedure invullen;
3. u kunt de opmaak van de login-box regelen via de style sheet van de desbetreffende webpagina;
4. u moet aan de webpagina code toevoegen die er voor zorgt dat er een waarschuwing wordt getoond als een gastouder IE6 gebruikt als webbrowser;
5. u moet aan de webpagina code toevoegen die er voor zorgt dat er een waarschuwing wordt getoond als in de webbrowser die de gastouder gebruikt javascript is uitgeschakeld.

Ad 1 en 2:

Om een login-box op te nemen in een webpagina, maakt u een html-formulier waarvan de gegevens worden gestuurd naar het webadres waar de inlogprocedure wordt afgehandeld. De belangrijkste velden van het formulier zijn:

• een tekstveld genaamd username;
• een tekstveld genaamd password;
• een verborgen veld genaamd role met waarde 5 (=gastouder).

De volgende code is een voorbeeld van hoe een login-box voor een gastouder zou kunnen worden geïmplementeerd. De html-code voor deze login-box is zonder enige opmaak (vormgeving).

<form enctype="application/x-www-form-urlencoded" action="https://[1].flexkids.nl/user/process" method="post">

<dl>

<dt id="groepLogin-label">&nbsp;</dt>

<dd id="groepLogin-element">

<fieldset id="fieldset-groepLogin"><legend>Gastouder Login</legend>

<dl>

<dt id="username-label"><label for="username" class="required">Uw e-mail adres</label></dt>

<dd id="username-element"><input type="text" name="username" id="username" value=""/></dd>

<dt id="password-label"><label for="password" class="required">Uw wachtwoord</label></dt>

<dd id="password-element"><input type="password" name="password" id="password" value=""/></dd>

<dt id="role-label"><label for="role" class="optional hidden"></label></dt>

<dd id="role-element"><input type="hidden" name="role" value="5" id="role"/></dd>

<dt id="login-label">&nbsp;</dt>

<dd id="login-element"><input type="submit" name="login" id="login" value="Log in" /></dd>

</dl>

</fieldset>

</dd>

</dl>

</form>

Bij [1] vult u de naam van uw opvangorganisatie in. Bijvoorbeeld:

action="https://kdv-doedeldam.flexkids.nl/user/process"

Ad 3:

Om de opmaak van de login-box te regelen kunt u de CSS-class van het desbetreffende DIV-element overschrijven. Ook kunt u de classes in het formulier zelf herdefiniëren. Voor een voorbeeld van het herdefiniëren van een class kunt u het boek Flexweb Webbeheer Extern raadplegen. U kunt dit boek aanvragen bij uw flexkids-consultant.

Ad 4:

Flexweb werkt niet goed als de gastouder IE6 (Internet Explorer 6) gebruikt. Ook is het noodzakelijk dat javascript aan staat in de webbrowser van de gastouder. Om dit duidelijk te maken aan de gastouder die via uw website probeert in te loggen op flexweb moet u de code van de desbetreffende HTML-pagina aanpassen.

Om de klant erop te attenderen dat hij javascript moet inschakelen, moet de volgende code worden toegevoegd aan de webpagina:

<noscript>

Om deze website te kunnen gebruiken moet u Javascript inschakelen.

</noscript>

Om de klant erop te attenderen dat als hij IE6 gebruikt het niet mogelijk is om gebruik te maken van het webgedeelte van flexweb moet de volgende code worden toegevoegd aan de desbetreffende HTML-pagina:

<!--[if IE 6]>

Uw webbrowser (Internet Explorer 6) is verouderd en wordt niet ondersteund door <i>flexweb</i>. Installeer voordat u verder gaat eerst een moderne webbrowser.

<![endif]-->

Bij een eventuele fout (ongeldige gebruikersnaam, wachtwoord) wordt de klant hierop gewezen en naar de algemene login-pagina van flexweb gestuurd.