Met de module Club.Dataservice is het mogelijk een webformulier te maken voor het aanmelden van nieuwe leden. Hieronder wordt besproken hoe zo'n formulier kan worden opgesteld en wat er gebeurt met de ingevoerde gegevens.

Formuliervelden
Verplichte velden
Een speciaal veld: de Captcha
Formuliergegevens submitten
Foutieve invoer
Gegevens in Sportlink Club
Meldingen naar de vereniging

1. Formuliervelden

De velden die beschikbaar zijn om te tonen in het webformulier zijn beschikbaar via het artikel aanmeldenaspirantlid-form. De output van dit artikel kan vanuit de webpagina die het formulier moet gaan tonen worden opgevraagd met de aanroep van het artikel aanmeldenaspirantlid-form.

De output kan via het resultaat van een curl-functie worden opgeslagen in een multidimensionaal array. Vanuit dit array kunnen de formuliervelden worden opgebouwd. Een simpel voorbeeld hiervan (in PHP) is:

<?
$clientid = "XXXXXXXX";

$url="https://data.sportlink.com/aanmeldenaspirantlid-form?client_id=" . $clientid;

$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result=curl_exec($ch);
curl_close($ch);

$array = json_decode($result, true);

$fields = array("voornaam","tussenvoegsel","achternaam","initialen","geslacht","geboortedatum","straatnaam","huisnummer","nummertoevoeging","postcode","plaats","land","telefoonnummer","mobielnummer","email","iban","bic","captcha","bondssporten");

$required = array("voornaam","achternaam","geslacht","geboortedatum","huisnummer","postcode","mobielnummer","email","captcha","bondssporten");

echo "<form id=\"aanmeldformulier\" method=\"POST\" autocomplete=\"on\" action=\"/verwerkaanmelding.php\">\n\n";

echo "  <table>\n";

foreach($array as $key => $value)
{
  foreach($value as $key2 => $value2)
  {
    if(in_array($key2,$fields))
    {
      echo "    <tr>\n";
      echo "      <td>\n        ";
      echo ucfirst(str_replace("captcha","typ de code over",$key2));
      if($key2=="geboortedatum")
      {
        echo " (jjjj-mm-dd)";
      }
      if(in_array($key2,$required))
      {
        echo " *";
      }
      echo "\n      </td>";
      echo "\n      <td>";
      if(is_array($value2) and count($value2)==2)
      {
        foreach($value2 as $key3 => $value3)
        {
          echo "\n        <input style=\"height: 20px; width: 20px; \" type=\"radio\" ";
          foreach($value3 as $key4 => $value4)
          {
            if($key4=="name")
            {
              echo "name=\"$key2\" ";
              $fieldname = $value4;
            }
            if($key4=="value")
            {
              echo "value=\"$value4\" ";
            }
            if($key4=="selected" and $value4=="true")
            {
              echo "checked=\"checked\" ";
            }
          }
          if(in_array($key2,$required))
          {
            echo " required=\"required\"";
          }
          echo ">";
          echo $fieldname;
        }
      }
      elseif(is_array($value2) and count($value2)>2)
      {
        echo "\n        <select style=\"width: 262px; \" name=\"$key2\">";
        foreach($value2 as $key3 => $value3)
        {
          echo "\n          <option ";
          foreach($value3 as $key4 => $value4)
          {
            if($key4=="name")
            {
              $fieldname = str_replace(" Week", "", str_replace("Week / ", "", $value4));
            }
            if($key4=="value")
            {
              echo "value=\"$value4\"";
            }
            if($key4=="selected" and $value4=="true")
            {
              $selector = $value4;
            }
          }
          if($selector)
          {
            echo " selected=\"selected\"";
            unset ($selector);
          }
          echo ">";
          echo  $fieldname;
          echo "</option>";
        }
        echo "\n        </select>";
      }
      elseif($key2=="captcha")
      {
        echo "\n        <img style=\"margin-bottom: 0px; \" src=\"data:image/png;base64," . $value2 . "\" align=\"left\" />\n        <input style=\"width: 120px; \" type=\"text\" autocomplete=\"off\" maxlength=\"6\" name=\"captcha\" onInput=\"mySubmitbutton.disabled = false; mySubmitbutton.style.cursor = 'pointer'; return true;\" required=\"required\">";
      }
      elseif($key2=="email")
      {
        echo "\n        <input type=\"email\" name=\"$key2\""; 
        if(in_array($key2,$required))
        {
          echo " required=\"required\"";
        }
        echo ">";
      }
      elseif($key2=="huisnummer")
      {
        echo "\n        <input type=\"number\" name=\"$key2\" min=\"1\" max=\"9999\""; 
        if(in_array($key2,$required))
        {
          echo " required=\"required\"";
        }
        echo ">";
      }
      elseif($key2=="geboortedatum")
      {
        echo "\n        <input type=\"date\" name=\"$key2\""; 
        if(in_array($key2,$required))
        {
          echo " required=\"required\"";
        }
        echo ">";
      }
      else
      {
        echo "\n        <input type=\"text\" name=\"$key2\""; 
        if(in_array($key2,$required))
        {
          echo " required=\"required\"";
        }
        echo ">";
      }
      echo "\n      </td>";
      echo "\n    </tr>\n";
    }
  }
  echo "  </table>\n";
  foreach($value as $key2 => $value2)
  {
    if(!in_array($key2,$fields))
    {
      echo "\n  <input type=\"hidden\" name=\"$key2\" value=\"";
      if(!is_array($value2)) { echo $value2; } 
      echo "\">";
    }
  }
}

echo "\n\n  <p>\n";

echo "    <input id=\"mySubmitbutton\"  type=\"submit\" name=\"submit\"  value=\"Aanmelden\" disabled=\"false\"> ";
echo "    <input id=\"myRefreshbutton\" type=\"button\" name=\"refresh\" value=\"Nieuwe code\" onClick=\"window.location.reload(); captcha.value=null; return false; \"> ";
echo "    <input id=\"myResetbutton\"   type=\"reset\"  name=\"reset\"   value=\"Leeg formulier\">";

echo "\n  </p>\n\n";

echo "</form>\n";
 
?>

2. Verplichte velden

Sportlink Club vereist een aantal verplichte velden. Welke velden verplicht zijn is te vinden in het artikel list. Worden deze vanuit het webformulier niet toegezonden dan zal de aanmelding niet worden verwerkt, verschijnt er geen nieuwe relatie in de ledenadministratie en geeft de webservice een foutmelding terug. Bij deze velden staat de eigenschap Optional op False. Het verdient aanbeveling deze velden in het webformulier het attribuut required="required" mee te geven zodat reeds client side invoer kan worden afgedwongen. De webservice accepteert alle invoer als string - ook velden als huisnummer en geboortedatum - dus indien cijfers of een datum als invoer moet worden afgedwongen kan dat door het type veld aan de hand van de veldnaam te definiëren als type="date" of type="number". Dit werkt overigens niet in alle browsers.

3. Een speciaal veld: de Captcha

De captcha moet als image worden getoond. Dit kun je doen door met de volgende source code (vul de naam van de variabele in op de plaats van {...}):

<img src="data:image/png;base64,{...}">/

Vervolgens lees je die in met:

<input type="text" name="captcha" required="required">

en geef je hem door samen met de captchaimagestring. De webservice moet deze twee namelijk met elkaar vergelijken.

4. Formuliergegevens submitten

De gegevens van het ingevulde formulier kunnen naar de webservice worden opgestuurd via een aanroep van het artikel aanmeldenaspirantlid. Dit kan op de volgende manier (Voorbeeld in PHP):

<?

$clientid = "XXXXXXXX";

$active_fields = array("voornaam","tussenvoegsel","achternaam","geslacht","geboortedatum","land","bondssporten","straatnaam","huisnummer","nummertoevoeging","postcode","plaats","telefoonnummer","mobielnummer","email","vrijedropdown2","iban","bic","captcha","geboorteplaats","nationaliteit","competitie","sport","vrijedropdown1","opmerkingen","captchaimagestring");

$url="https://data.sportlink.com/aanmeldenaspirantlid?client_id=" . $clientid;

foreach($active_fields as $key => $value)
{
  if(!empty($_POST[$value]))
  {
    $url .= "&" . $value . "=" . rawurlencode($_POST[$value]);
  }
}

$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result=curl_exec($ch);
curl_close($ch);

$array = json_decode($result, true);

if(!empty($array))
{
  foreach($array as $key => $value)
  {
    if($key=="error")
    {
      echo "<p>\n  Mededeling dat gegevens niet kunnen worden verzonden, met reden:\n</p>\n\n<p>\n";
      foreach($value as $key2 => $value2)
      {
        if(is_array($value2))
        {
          foreach($value2 as $key3 => $value3)
          {
            if(is_array($value3))
            {
              foreach($value3 as $key4 => $value4)
              {
                if($key4=="description")
                {
                  echo "  " . $value4 . "\n  <br>\n";
                }
              }
            }
          }
        }
        elseif($key2=="message")
        {
          if($value2=="Internal server error")
          {
            echo "  Mededeling dat aanmelding niet verwerkt kan worden. Mogelijk is een verplicht veld verkeerd ingevoerd.\n  <br>\n";
          }
          else
          {
            echo "  " . $value2 . "\n  <br>\n";
          }
        }
      }
      echo "</p>\n\n";

      echo "<p>\n";
      echo "  Opnieuw proberen: Captcha-code verversen!\n";
      echo "</p>\n\n";

      echo "<input type=\"button\" name=\"refresh\" value=\"Opnieuw\" onClick=\"window.history.back(); return false; \">\n\n";
    }
  }
}

?>

Zorg ervoor dat alle waardes worden gecodeerd met rawurlencode.

5. Foutieve invoer

Als de submit lukt, zal de webserver een lege resultaatset geven en kan de bezoeker van de site worden doorgestuurd naar een bedank-pagina. Geeft de webserver wel een resultaat terug, dan is de aanmelding mislukt en is er niets opgeslagen in Sportlink Club. In dat geval kan de bezoeker van de site worden doorgestuurd naar een foutafhandelingspagina of terug naar de pagina met het aanmeldformulier. Het resultaat kan op dezelfde manier worden opgeslagen in een array als het resultaat van de opvraging van de formuliervelden zoals hierboven beschreven.

6. Gegevens in Sportlink Club

Als de submit lukt, wordt er een relatie in Sportlink Club aangemaakt.

notificatiescherm

Ook verschijnt er een notificatie in het notificatiescherm waarin te zien is dat deze relatie aangemaakt is via de website van de vereniging:

notificatie_clubsite

De ledenadministrateur kan aan de hand van de gegevens van deze relatie beoordelen of deze aanmelding serieus genomen moet worden en kan de relatie omzetten naar verenigingslid of bondslid.

7. Meldingen naar de vereniging

Sportlink Club en de webservice zorgen beide voor een melding aan de vereniging. Sportlink Club toont een nieuwe notificatie in het notificatiescherm (zie hierboven). Vanuit de webservice wordt ter controle een email-bericht verstuurd aan de secretaris van de vereniging.

Het is uiteraard ook mogelijk om vanuit het webformulier zelf een email-bericht te laten versturen aan een functionaris naar keuze.

De bezoeker van de website die het webformulier heeft ingevuld ontvangt hiervan vanuit Sportlink Club of de webservice geen bevestiging. De doorverwijzing naar een bedankpagina - zoals hierboven besproken - kan zo'n bevestiging zijn maar een bevestiging per email kan ook worden geprogrammeerd, bijvoorbeeld met de mail-functie in PHP.